vue 笔记之 vue-router

说明

1. vue路由,即 vue-router
2. 中文文档
3. 安装：npm install vue-router --save
4. 所谓的路由就是一个key-value的映射关系，在vue路由中key指的是组件的 path,value指的是组件。

相关API说明

1. VueRouter() 用于创建路由器的构造函数。

   new VueRouter({
       // 多个配置项
   });
   

2. 路由配置

   routes:[
       { // 一般路由
           path:'/about',
           component:About
       },
       { //自动跳转路由
           path:'/',
           redirect:'/about',
       }
   ];
   

3. 挂载路由器

   import router from './router';
   new Vue({
       router,
   });
   

4. 使用路由组件标签
   • <router-link>:用来生成路由链接
     • 用法：<router-link to="/xxx">Go to xxx </router-link>
     • <router-link> 和 <a>标签十分类似，to 属性和<a>标签的 href 属性十分类似。
   • <router-view>: 用来显示当前路由组件的界面
     • 用法：<router-view></router-view>
     • <router-view>的作用十分类似 vue 中的插槽(slot)
5. 注意：
   • path 最左侧的 / 永远代表根路径。
   • 优化路由器配置：linkActiveClass: 'active', // 指定选中的路由链接的 class

编写路由的步骤

1. 创建路由组件
2. 将路由组件映射成路由关系
3. 通过<router-link>和<router-view>使用路由组件

嵌套路由

1. 在要嵌套的父路由配置中 使用 children 关键字定义子路由配置
2. 子路由的配置和 routes 的配置一样。

缓存路由组件对象

1. 默认情况下，被切换的路由组件对象会死亡释放，再次回来时是重新创建的。
2. 当数据实时性低的时候，如果可以缓存路由组件对象，可以提高用户体验
3. 编码实现：

   <keep-alive>
       <router-view></router-view>
   </keep-alive>
   

向路由组件传递数据

方式1：路由路径携带参数（Param/query）

1. 配置路由：

   children:[
       {
           path:'mdetail/:id',
           component:MessageDetail
       }
   ]
   

2. 路由路径

   <router-link :to="'/home/message/mdetail/'+m.id">
       {{m.title}}
   </router-link>
   

3. 路由组件中读取请求参数

   this.$route.params.id
   

方式2：<router-view> 属性携带数据

1. <router-view :msg="msg"></router-view>

编程式路由导航

相关API

1. this.$router.push(path) :相当于点击路由链接（可以返回当前路由界面）
2. this.$router.replace(path) : 用新路由替换当前路由（不可以返回到当前路由）
3. this.$router.back() : 请求（返回）上一个记录路由
4. this.$router.go(-1) : 请求（返回）上一个记录路由
5. this.$router.go(-1) : 请求下一个记录路由

路由导航守卫

1. 导航：表示路由正在发生改变
2. 路由导航守卫表示监视路由的改变，然后在改变的过程中进行一些操作
3. 路由的参数或查询的改变不会触发进入/离开导航守卫，可以通过 监视$route 对象来应对这些变化

全局前置守卫

1. 通过 router.beforeEach 注册

   const router = new VueRouter({ ... })
   
   router.beforeEach((to, from, next) => {
     // ...
   })
   

2. 参数分析：
   • to：将要前往的路由
   • from： 将要离开的当前路由
   • next(): 进入路由
     • 一定要调用该方法，否则路由会一直挂起
     • next():进入将要前往的路由
     • next(path): 进入指定path的路由
3. 参考下面的代码：

   // 设置路由导航守卫
   router.beforeEach((to, from, next) => {
       // console.log(to);
       // console.log(from);
   
       // 要前往的页面是否是登录或注册页面
       if (to.path === '/login' || to.path === '/register') {
           next();
           return;
       }
   
       // 是否登录
       const isLogin = tools.storage.get('token').length !== 0;
       if (isLogin) {
           next();
       } else {
           next('/login');
       }
   });