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

2022-01-27 18:33:18 阅读：149 来源： 互联网

路由传参
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']">

标签：传参,跳转,params,router,query,路由
来源： https://blog.csdn.net/Allurewuhui/article/details/122722051

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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