Vue3：vue-router 的高级用法

1、路由重定向

• 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：
  路由重定向

2、路由高亮

• 可以通过如下的两种方式，将激活的路由链接进行高亮显示：
  ① 使用默认的高亮 class 类
  ② 自定义路由高亮的 class 类

2.1 默认的高亮 class 类

• 被激活的路由链接，默认会应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式：
  

2.2 自定义路由高亮的 class 类

• 在创建路由的实例对象时，开发者可以基于 linkActiveClass 属性，自定义路由链接被激活时所应用的类名：
  

.router-active {
  background-color: blue;
  color: white;
  font-weight: bold;
}

3、 嵌套路由

• 通过路由实现组件的嵌套展示，叫做嵌套路由。
  
  
  ① 声明子路由链接和子路由占位符
  ② 在父路由规则中，通过children 属性嵌套声明子路由规则

// router.js
import { createRouter, createWebHashHistory } from 'vue-router'

import Home from './MyHome.vue'
import Movie from './MyMovie.vue'
import About from './MyAbout.vue'

import Tab1 from './tabs/MyTab1.vue'
import Tab2 from './tabs/MyTab2.vue'
import Tab3 from './tabs/MyTab3.vue'

// 创建路由对象
const router = createRouter({
  // 指定路由的工作模式
  history: createWebHashHistory(),
  // 自定义路由高亮的 class 类
  linkActiveClass: 'active-router',
  // 声明路由的匹配规则
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    {
      path: '/about',
      component: About,
      // 嵌套路由的重定向
      redirect: '/about/tab3',
      // 通过 children 属性嵌套声明子级路由规则
      children: [
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 },
        { path:  'tab3', component:Tab3},
      ],
    },
  ],
})

// 导出路由对象
export default router

3.1 声明子路由链接和子路由占位符

• 在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下：
  

3.2 通过 children 属性声明子路由规则

• 在 router.js 路由模块中，导入需要的组件，并使用children 属性声明子路由规则。示例代码如下：
  

4、动态路由匹配

• 思考：有如下 3 个路由链接：
  
• 定义如下 3 个路由规则，是否可行???
• 缺点：路由规则的复用性差。

import { createRouter, createWebHashHistory } from 'vue-router'

import Home from './MyHome.vue'
import Movie from './MyMovie.vue'
import About from './MyAbout.vue'

import Tab1 from './tabs/MyTab1.vue'
import Tab2 from './tabs/MyTab2.vue'

// 创建路由对象
const router = createRouter({
  // 指定路由的工作模式
  history: createWebHashHistory(),
  // 自定义路由高亮的 class 类
  linkActiveClass: 'active-router',
  // 声明路由的匹配规则
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    // 动态路由匹配
    { path: '/movie/:mid', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // 嵌套路由的重定向
      redirect: '/about/tab1',
      // 通过 children 属性嵌套声明子级路由规则
      children: [
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 },
      ],
    },
  ],
})

// 导出路由对象
export default router

4.1 动态路由的概念

• 动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号（:）来定义路由的参数项。示例代码如下：
  

4.2 $route.params 参数对象

• 通过动态路由匹配的方式渲染出来的组件中，可以使用 $route.params 对象访问到动态匹配的参数值。
  

4.3 使用 props 接收路由参数

• 为了简化路由参数的获取形式，vue-router 允许在路由规则中开启props 传参。示例代码如下：
  

5、编程式导航

• 通过调用 API 实现导航的方式，叫做编程式导航。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。例如：
  ⚫ 普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航
  ⚫ 普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

5.1 vue-router 中的编程式导航 API

• vue-router 提供了许多编程式导航的 API，其中最常用的两个 API 分别是：
  ① this.$router.push('hash 地址')
     ⚫ 跳转到指定 Hash 地址，从而展示对应的组件
  ② this.$router.go(数值 n)
     ⚫ 实现导航历史的前进、后退

5.2 $router.push

• 调用 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下：
  

5.2 $router.go

• 调用 this.$router.go() 方法，可以在浏览历史中进行前进和后退。示例代码如下：
  

6、命名路由

• 通过 name 属性为路由规则定义名称的方式，叫做命名路由。示例代码如下：
  
• 注意：命名路由的 name 值不能重复，必须保证唯一性！

6.1 使用命名路由实现声明式导航

• 为 <router-link> 标签动态绑定 to 属性的值，并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下：
  

6.2 使用命名路由实现编程式导航

• 调用 push 函数期间指定一个配置对象，name是要跳转到的路由规则、params 是携带的路由参数：
  

7、导航守卫

• 导航守卫可以控制路由的访问权限。示意图如下：
  

7.1 如何声明全局导航守卫

• 全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫：
  

7.2 守卫方法的 3 个形参

• 全局导航守卫的守卫方法中接收 3 个形参，格式为：
  
  ① 在守卫方法中如果不声明 next 形参，则默认允许用户访问每一个路由！
  ② 在守卫方法中如果声明了 next 形参，则必须调用 next() 函数，否则不允许用户访问任何一个路由！

7.3 next 函数的 3 种调用方式

• 参考示意图，分析 next 函数的 3 种调用方式最终导致的结果：
  • 直接放行：next()
  • 强制其停留在当前页面：next(false)

  • 强制其跳转到登录页面：next('/login')

    
    

// router.js文件
import { createRouter, createWebHashHistory } from 'vue-router'
// 创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/main', component: Main },
    { path: '/login', component: Login },
  ],
})

// 全局路由导航守卫
router.beforeEach((to, from, next) => {
const tokenStr = localStorage.getItem('token')

  if (to.path === '/main' && !tokenStr) {
    // 证明用户要访问后台主页
    next('/login')
  } else {
    // 访问的不是后台主页
    next()
  }
})

// 调用
import router from './components/XXX/router'
const app = createApp(App)
// 挂载路由模块
app.use(router)

7.4 结合 token 控制后台主页的访问权限