Vue路由使用总结

1、多级路由

（1）配置路由规则，使用children配置项：

// 编写配置项
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component:About,
    },
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news', // 此处一定不要写：/news
          component: News,
        },
        {
          path: 'message',// 此处一定不要写：/message
          component: Message,
        }
      ]
    }
  ]
})


export default router

（2）跳转（要写完整路径）

 <router-link to="/home/news">News</router-link>

2、路由的query参数

1、传递参数

 <ul class="list">
      <li
        v-for="item in list"
        :key="item.id"
      >
        <!-- 跳转并携带query参数，to的字符串写法 -->
        <router-link :to="`/home/message/detail?id=${item.id}&msg=${item.msg}`">{{item.msg}}</router-link>

        <!-- 跳转并携带query参数，to的对象写法 -->
        <router-link :to="{
          path:'/home/message/detail',
          query:{
            id:item.id,
            msg:item.msg
          }
        }">{{item.msg}}</router-link>
      </li>
    </ul>

2、接受参数

$route.query.id
$route.query.msg

3、命名路由

1、作用：可以简化路由的跳转

2、如何使用

　　（1）给路由命名　

// 编写配置项
const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'message',// 此处一定不要写：/message
          name:'message', // 给路由命名
          component: Message,
          children: [
            {
              name: 'detail',
              path: 'detail',
              component:Detail
            }
          ]
        }
      ]
    }
  ]
})

　　（2）简化跳转

<!-- 简化前，要写完整的路径 -->
<router-link to="/home/message/detail">Message</router-link>

<!-- 简化后，直接通过路由名字跳转 -->
<router-link :to="{name:detail}">Message</router-link>

<!-- 简化写法配合传递参数 -->
 <router-link :to="{
          name:'detail',
          query:{
            id:item.id,
            msg:item.msg
          }
}">{{item.msg}}</router-link>

          

4、路由的params参数

1、配置路由，声明接受的params参数

{
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news', // 此处一定不要写：/news
          component: News,
        },
        {
          path: 'message',
          name:'message',
          component: Message,
          children: [
            {
              name: 'detail',
              path: 'detail/:id/:msg', //使用占位符声明接收params参数
              component:Detail
            }
          ]
        }
      ]
    }

2、传递参数

<li
        v-for="item in list"
        :key="item.id"
      >
        <!-- 跳转并携带params参数，to的字符串写法 -->
        <router-link :to="`/home/message/detail/${item.id}/${item.msg}`">{{item.msg}}</router-link>

        <!-- 跳转并携带params参数，to的对象写法 -->
        <router-link :to="{
          name:'detail',
          params:{
            id:item.id,
            msg:item.msg
          }
        }">{{item.msg}}</router-link>
      </li>

3、接受参数

$route.params.id
$route.params.msg 

5、路由的props配置

1、作用：让路由组件更方便的接收到参数

{
 　name: 'detail',
   path: 'detail/:id/:msg', //使用占位符声明接收params参数
   component: Detail,
   // 第一种写法，props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
   // props: { a: 900 },

   // 第二种写法：prop值为布尔值，布尔值为true，则把路由收到的所有的params参数通过props传给Detail组件
   // props:true,

   // 第三种写法：props值为函数，该函数返回对象中每一组key-value都会通过props传递给Detail组件
    props(route) { 
      return {
         id: route.query.id,
         msg:route.query.msg
        }
     }

2、组件类接受

 props:['id','msg'], // 接受路由参数

6、<router-link>的replace属性

1、作用：控制路由跳转时操作浏览器历史记录的模式

2、浏览器的历史记录有两种写入方式：分别为铺设和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push

3、如何开启replace模式<router-link replace .... >News<router-link>

7、编程式路由导航

1、作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

2、具体编码：

  // $router的两个API
    this.$router.push({
      name: 'detail',
      params: {
        id: 'xxx',
        msg:'xxxx'
      }
    })


    this.$router.replace({
      name: 'detail',
      params: {
        id: 'xxx',
        msg:'xxxx'
      }
    })

    this.$router.forward() //前进
    this.$router.back() // 后退
    this.$router.go() //传入数字，数字为正数表示前进，数字为负数表示后退，0表示刷新当前页面

8、缓存路由组件

1、作用：让不展示的路由组件保持挂载，不被销毁

2、具体编码：

<keep-alive include="News">
      <router-view></router-view>
</keep-alive>

9、与路由相关的两个生命周期钩子

1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

2、具体名字：

（1）activated 路由组件被激活时触发

（2）deactivated 路由组件失活时触发

10、路由守卫

1、作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

2、分类：全局守卫，独享守卫，组件内守卫

3、全局守卫

// 全局前置守卫，初始化时执行，每次路由切换前执行
router.beforeEach((to,from,next) => { 
  console.log('beforeEach',to, from);
  if (to.meta.isAuth) { //meta 是路由配置，可以配置一些要用的额外信息，如权限信息
    if (localStorage.getItem('user') === 'test') {
      next() // 放行
    } else {
      console.log('暂无权限查看')
    }
  } else { 
    next() // 放行
  }
})


// 全局后置守卫，初始化时执行，每次路由切换前执行
router.afterEach((to,from) => { 
  console.log('afterEach', to, from);
  if (to.meta.title) { 
    document.title = to.meta.title // 修改网页的title
  } else {
    document.title = 'vue_test'
  }
})

4、独享守卫

 {
     path: 'news', // 此处一定不要写：/news
     component: News,
     meta: {isAuth:true,title:'新闻' },
     beforeEnterr(to,from,next) { 
     console.log('beforeEnterr',to, from);
     if (to.meta.isAuth) { 
          if (localStorage.getItem('user') === 'test') {
            next() // 放行
          } else {
            console.log('暂无权限查看')
          }
     } else { 
         next() // 放行
      }
    },
},

5、组件内守卫

 // 进入守卫，通过路由规则，进入该组件时被调用
  beforeRouteEnter(to, from, next) { 
    
  },
  // 离开守卫，通过路由规则，离开该组件时被调用
  beforeRouteLeave(to,from,next) { 

  },