vue3.x routing 404 wildcard processing

vue-router3.x wildcard rules

The 404 routing wildcard method of vue-router3.x corresponding to vue2.x:

 {
  path: '*', // 会匹配所有路径
  name: '404',
  component: () => import('@/views/404/index.vue')
}

vue-router4.x wildcard rules

The above code has no effect in the routing wildcard of vue-router4.x corresponding to vue3.x, and needs to be changed to this:

 {
  path: '/:error*', // /:error -> 匹配 /, /one, /one/two, /one/two/three, 等
  name: '404',
  component: () => import('@/views/404/index.vue')
}

match priority

Sometimes, the same path can match multiple routes. In this case, the priority of matching is in the order of route definition: the earlier a route is defined, the higher the priority.

[success] PS: 404 wildcard routing is generally placed at the bottom of the routing definition

For more front-end knowledge, please pay attention to the applet, there will be surprises from time to time!