Vue路由的详细介绍（路由传参，跳转，守卫）

1. 路由传参

   1. query传参

      • 直接在请求路径后面以键值对的形式传递参数的形式为query传参

      • 通过$route.query读取对应参数

   2. params传参

      • 直接在请求路径后面接参数且需要在对应路由中使用占位符声明接收params参数

      • 通过$route.params读取对应参数

   3. router-link标签中 to 的对象写法

      1. to必须为动态数据绑定

      2. 若为query传参 to对配置对象为 path 和 query

      3. 若为params传参 to对配置对象为 name和 query

         • params传参使用 to 的对象写法 必须使用 name 进行跳转 不能使用 path 进行跳转

         • 所以在router 文件的index.js文件中必须配置 name 命名路由

2. router和route的关系

   1. router只有一个 而 每个组件都有对应不同的route

   2. 每个组件的route身上由不同的属性

      1. params{}： 存储 通过params传参跳转到该路由的params参数

      2. query{}： 存储 通过query传参跳转到该路由的query参数

      3. meta{}：自定义键值对 用于路由守卫鉴权

3. 路由守卫 ：对路由进行权限控制

   1. 全局路由守卫（在router文件中的index.js配置）：

      1. 全局前置路由守卫：router.beforeEach((to,from,next)=>{})

         1. 每次路由切换前执行

         2. to是跳转到哪 其身上有目标路由的各种属性 如：params query meta 等

         3. from是从哪个路由触发 其身上有起始路由的各种属性 如：params query meta 等

         4. next（）是放行，比如鉴权过了就next（）

      2. 全局后置守卫：router.afterEach((to,from)=>{})

         1. 每次路由切换后执行

         2. to是跳转到哪 其身上有目标路由的各种属性 如：params query meta 等

         3. from是从哪个路由触发 其身上有起始路由的各种属性 如：params query meta 等

         4. 无next

   2. 独享路由守卫beforeEnter: (to, from, next) => {}

      1. 在router文件中index.js中需要单独设置守卫的路由中添加该配置项

         1. 每次路由切换前执行

         2. to是跳转到哪 其身上有目标路由的各种属性 如：params query meta 等

         3. from是从哪个路由触发 其身上有起始路由的各种属性 如：params query meta 等

         4. next（）是放行，比如鉴权过了就next（）

   3. 组件内守卫

      1. 写在需要有单独设置的对应组件当中

         与 data methods 平级 beforeRouteEnter(to, from, next){}

         必须是通过路由规则进入组件才会被触发

         • 进入守卫：beforeRouteEnter (to, from, next) {}

         • 离开守卫：beforeRouteLeave (to, from, next) {}

4. 编程式路由导航

   1. 不通过router-link进行路由的跳转 让路由跳转更加灵活

      1. this.$router.push({})

      2. this.$router.replace({})

         1. push是保留上一级路由 可以返回上一级路由

         2. replace是先删掉上一级路由然后把它取代掉 不能返回上一级路由

         3. 该方法配置对象为：跳转的路径 和 要携带的参数

      3. this.$router.forward() //前进 this.$router.back() //后退 this.$router.go() //可前进也可后退

5. 缓存路由组件

   1. 当从当前路由跳转到另一个路由后，之前的路由会被销毁，缓存路由就是为了不让上一个路由跳转完成后被销毁

      // 通过keep-alive标签配置include去设置哪个组件路由被缓存