vue路由之vueRouter

1. 路由基本配置

引入路由组件 import Index from '@/components/Index'
    
        在routes里面配置：
            {
              path: '/index',
              name: 'index',
              component: Index,
            },

 2. 路由传参和获取参数:params和query

（1）params
            1、在组件中配置 this.$router.push(`/detail/${id}`)，注意id是传入的参数
            2、在routes里面配置：
            {
              path: '/detail/:id',
              name: 'detail',
              component: Detail
            }
            3、获取参数，一般在周期函数mounted里面
                this.$route.params.id

        （2）query
            1、在组件中配置 
                this.$router.push({
                    path:"/detail2",
                    query:{
                      id:id
                    }
                  })
            2、在routes里面配置：
                {
                  path: '/detail2',
                  name: 'detail2',
                  component: Detail
                }
            3、获取参数，一般在周期函数mounted里面
                this.$route.query.id

3. 二级路由 

        二级路由和一级路由一样正常引入就可以。   

{
          path: '/person',
          name: 'person',
          component: Person,
          children:[
            {
              path:'/only/:id',
              name:'only',
              component:PersonOnly,
            }
          ]
        }

4. 命名视图

 <router-link to='/person'>个人</router-link>

        备注：to后面是跳转到路由的地址

5. 路由懒加载 

 {
          path: '/person',
          name: 'person',
          component: resolve => require(['@/components/Person'],resolve)
        }

        备注，一句话：component: resolve => require(['@/components/Person'],resolve)

6. 导航钩子和元数据的应用       

 vueRouter.beforeEach((to,from,next)=>{
          if(to.matched.some(res=>res.meta.hasPermission)){
            if(localStorage.getItem('isLogin')){
              // 正常执行
              next();
            }else {
              next({
                path: '/',
                query: {redirect: to.fullPath}
              }) 
            }
          }else {
            next();
          }  
        })

代码说明：正常执行的条件:数组的某一项拥有meta.hasPermission且为true，路由进入，否则重定向。

# 详细代码见 [https://github.com/XZZ22/vueRouter/tree/master](https://github.com/XZZ22/vueRouter/tree/master) #