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

2023-11-13 19:52:16

路由传参
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 命名路由
router和route的关系
1. router只有一个而每个组件都有对应不同的route
2. 每个组件的route身上由不同的属性
  1. params{}：存储通过params传参跳转到该路由的params参数
  2. query{}：存储通过query传参跳转到该路由的query参数
  3. meta{}：自定义键值对用于路由守卫鉴权
路由守卫：对路由进行权限控制
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) {}
编程式路由导航
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() //可前进也可后退

缓存路由组件

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

// 通过keep-alive标签配置include去设置哪个组件路由被缓存
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>
<!-- 缓存多个路由组件 -->
<keep-alive :include="['News','Message']">

码农公寓

相关文章