深度畅游Vue中的路由

Vue路由-全局前置守卫

1. 作用：路由跳转之前，会触发一个函数。

2. 场景：检验是否登录，没登录就跳转到登录页，主要用于权限控制。

3. 语法：

   router.beforeEach((to,form,next)=>{})（在main.js中）

   参数一（to）：到哪里去

   参数二（from）：从哪里来

   参数三（next）：是否放行，也可以控制跳转的路径

   next(false) 拦截,不允许跳转

   next()不拦截，跳转

   next（‘/路径名‘） 跳转到指定路径

触发:函数会在每一次路由跳转之前触发

如果注册了前置守卫，必须要调用next方法，否则路由系统就瘫痪了

4. 示范

   // 模拟未登录
   let login = false
   router.beforeEach((to, from, next) => {
     if (!login && to.path == '/my') {//判断是否登录 和跳转的页面是不是my页面
       alert('您还没有登录')
       return next('/part')  //如果未登录，跳转到part这个页面
     }
     next()//直接跳转
   })
   

Vue路由 - 组件缓存（keep-alive）

1. 作用：不会频繁的创建和销毁组件，页面更快呈现

2. 写法：vue内置的keep-alive组件把要缓存的组件<router-view></router-view>包起来

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

Vue路由-组件缓存-匹配缓存

1. 属性：

   • include属性

     只缓存

   • exclude属性

     只排查

2. 使用方法：在组件缓存的基础上<keep-alive></keep-alive>在keep-alive里面加属性

   （1) 先给对应组件设置name属性名

   （2）再把名字填写到include/exclude位置

   	<keep-alive include="Find">//Find是对应的页面中的name
           <router-view></router-view>
         </keep-alive>
   

   ​ 跳转的页面的name

Vuex介绍

0. 作用：能够方便、高效地实现组件之间的数据共享

1. Vue是什么？

   Vuex是vue项目中实现大范围数据共享的技术方案

2. 优势：

   0. 数据的存取一步到位，不需要层层传递
   1. 数据的流动非常清晰
   2. 存储在Vuex中的数据都是响应式的

3. 场景：

   0. 适合频繁、大范围的数据共享