vuex全家桶系列03-404路由和路由匹配优先级

1.404路由：

• views文件夹下建立一个404.vue的文件。
• router文件夹下面index.js文件中添加path:"*",意思是所有路径。路由信息对象中的component是通过() => import("@/views/404")的方式来异步加载组件的。
• path:"/user-*"中的*这里的是通配符的意思，就是代表任意字符，"*"所代表的字符，后续可以通过$route.params.pathMatch来获得。

//🍊src/router/index.js

import Vue from "vue";
//1、导入 vuerouter
import VueRouter from "vue-router";
//2、模块化机制，使用vuerouter
Vue.use(VueRouter);
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
//3、创建路由器对象，并在VueRouter中配置路由信息对象
export default new VueRouter({
  routes:[
    {
      path:"/",
      name:"home",
      component:Home
    },
    {
      path:"/about",
      name:"about",
      component:About
    },
    {
      path:"/user/:id",
      name:"user",//动态路由匹配
      component:User
    },
    {
      //🍊这里的*是通配符的意思，就是代表任意字符，"*"所代表的的字符，后续可以通过$route.params.pathMatch来获得
      path:"/user-*",
      component:()=>import("@/views/User-admin")
    },
    {
      //🍊404页面配置
      path:"*", //异步加载组件
      component:() => import("@/views/404")
    }
  ]
})

当使⽤⼀个通配符时， $route.params 内会⾃动添加⼀个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分

{
path: '/user-*',
component: () => import('@/views/User-admin.vue')
}
this.$route.params.pathMatch // 'admin'

下面是User-admin.vue文件代码:

//
<template>
<div>
    <h2>我是user-admin</h2>
    <h3>{{$route.params.pathMatch}}</h3>
</div>
</template>

<script>
export default {

}
</script>

<style scoped>

</style>