开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

Vue路由

概念: 路径和组件的映射关系

作用: 切换业务场景

基础使用

0. 下载vue-router@3.5.4的包
1. 引入VueRouter函数
2. 使用Vue.use(VueRouter)注册插件 -> VueRouter函数对象内, 注册了RouterView和RouterLink全局组件
3. 创建路由规则(路径和组件对象映射关系)数组(路由表)
4. 利用路由规则数组, 来生成路由对象 new VueRouter({ routes: 路由数组 })
5. 注入到new Vue({ router: 路由对象 })
6. 设置路由挂载点, 设置router-view标签

效果: 当你切换地址栏里路由路径地址, 匹配到的组件就会挂载到router-view标签的位置

切换跳转方式

0. 声明式导航

   • 方式1:
   • 方式2: 声明式导航首页

1. 编程式导航

   • 方式1: this.$router.push({ path: '/路由地址' })
   • 方式2: this.$router.push({ name: '路由名字' }) // 注意: 路由名字在路由规则数组对象name属性上声明

传参

0. 声明式导航

   • • 接收: $route.query.参数名

   • • 注意: 这种方式, 需要在路由规则表(数组)里, 提前配置好匹配的路径path: '/路由路径/:参数名'
     • 接收: $route.params.参数名

1. 编程式导航

   方式1: path+query

   this.$router.push({
       path: '/路由路径',
       query: {
           参数名: 值
       }
   })
   ​
   // 接收方: this.$route.query.参数名
   

   方式2: name+params

   this.$router.push({
       name: '路由名字',
       params: {
           参数名: 值
       }
   })
   // 注意: 参数名要和路由规则对象里path: '/路由路径/:参数名' 一致 (值才会出现在路径上)
   ​
   // 接收方: this.$route.params.参数名
   

路由嵌套

0. (画面): 你要先确定在哪个页面, 嵌套路由(导航和挂载点)
1. 确定嵌套几个子页面, 创建相应页面vue文件组件
2. 引入到路由规则数组中, 在上级路由规则对象中加入children配置
3. 在上级页面里面加入导航和router-view挂载点

路由守卫

全局前置守卫: 守卫路由跳转的一个函数, 可以在里面做一些判断来决定是否跳转路由或取消或重定向路由