一幅长文细学Vue（七）——路由

7 路由

摘要：在本文中我们会谈及路由的知识点，了解前端路由工作的过程以及如何在Vue3中配置路由，知道怎么使用嵌套路由和实现动态路由匹配，以及使用编程式导航和导航守卫。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取
作者：来自ArimaMisaki创作

7.1 路由的概念

后端路由：请求方式、请求地址于function处理函数之间的对应关系。

SPA：一个web网站只有唯一的一个HTML页面，所有组件的展示和切换都在这唯一的一个页面内实现。此时不同组件之间的切换需要通过前端路由来实现。

前端路由：Hash地址和组件之间的对应关系；点击不同的链接可以切换不同的哈希地址从而达到切换组件的效果。

7.2 前端路由的工作方式

说明：

1. 用户点击了页面的路由链接
2. URL地址栏中的Hash值发生了变化
3. 前端路由监听到Hash地址的变化
4. 前端路由把当前Hash地址对应的组件渲染到浏览器中

7.3 简易路由

说明：使用动态组件+location.hash+window.onhashchange可以达到一个简易路由的效果，这里不再演示。

7.4 Vue路由解决方案

说明：在实际开发中，只要是Vue项目，我们都可以使用官方推荐的Vue-router来实现路由。

版本：vue-router有3.x和4.x的版本，其中3.x只能搭配Vue2，4.x只能搭配Vue3

安装：npm i vue-router@next -S

7.5 Vue-router的基本使用

链接标签：router-link

路由组件标签：router-view

说明：使用router-link标签代替传统的a标签，可以让我们在不刷新网页的情况下改变哈希地址，其中router-link标签中带有属性to，其值为哈希地址；我们可以将router-link对应的组件渲染到router-view标签之上。

使用步骤：

1. 在项目中创建router.js路由模块
2. 从vue-router中按需导入两个方法；其中createRouter用于创建路由，createWebHashHistory用于指定路由工作模式
3. 创建路由实例对象
4. 向外共享路由实例对象
5. 在main.js中导入并挂载路由模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './MyHome.vue'
import About from './MyAbout.vue'
import Movie from "./MyMovie.vue"


// 1.创建路由实例对象
const router = createRouter({
    // 2.指定路由工作模式，为了简化学习，我们采用Hash模式
    history:createWebHashHistory(),
    // 3.指定路由地址及其对应组件
    routes:[
        {path:'/home',component:Home},
        {path:'/movie',component:Movie},
        {path:'/about',component:About}
    ]
})

// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import { createApp } from 'vue'
import App from "./components/02.start/App.vue"
import router from "./components/02.start/Router"

const app = createApp(App)
app.use(router)
app.mount('#app')
1
2
3
4
5
6
7

7.6 路由重定向

说明：路由重定向是值用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。

解决方案：在routes数组中需要重定向的对象中添加redirect属性，并设置其值为重定向的地址。

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './MyHome.vue'
import About from './MyAbout.vue'
import Movie from "./MyMovie.vue"


// 1.创建路由实例对象
const router = createRouter({
    // 2.指定路由工作模式，为了简化学习，我们采用Hash模式
    history:createWebHashHistory(),
    // 3.指定路由地址及其对应组件
    routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/movie',component:Movie},
        {path:'/about',component:About}
    ]
})

// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

7.7 路由链接美化

引入：由于我们不再使用传统的a标签，这也就导致了无法再使用传统的css美化样式对其进行美化。

说明：我们对于router-link有两个美化的解决方案：

• 使用默认的class类：被激活的路由链接，默认会应用一个叫做router-link-active的类名。开发者可以使用此类名选择器，为激活的路由链接设置样式。
• 自定义路由的class类：在创建路由的实例对象时，可以基于与history平级，添加一个linkActiveClass属性，值为自定义的类名。

7.8 嵌套路由

说明：通过路由实现组件的嵌套展示，叫做嵌套路由。也就是说，在一个大组件中包含了多个小组件，一个页面可以通过路由来切换不同的大组件，大组件中也可以根据嵌套路由来切换不同的小组件。

使用嵌套路由的方式是在父路由的创建路由方法中添加children规则；children是一个数组，里面可以存放多个路由对象，嵌套子路由对象和一般的路由对象写法完全一样。

写法：

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from './MyHome.vue'
import About from './MyAbout.vue'
import Movie from "./MyMovie.vue"

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

// 1.创建路由实例对象
const router = createRouter({
    // 2.指定路由工作模式，为了简化学习，我们采用Hash模式
    history:createWebHashHistory(),
    // 3.指定路由地址及其对应组件
    routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/movie',component:Movie,name:'mov'},
        {path:'/movie/:id',component:Movie},
        {path:'/about',component:About},
        {path:'/about',component:About,redirect:'/about/tab1',children:[
            // 子级路由不要以斜线开头
            {path:'tab1',component:Tab1},
            {path:'tab2',component:Tab2}
        ]}
    ]
})

// 4.前往main.js调用app.use全局挂载该路由实例对象
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

7.9 动态路由

引入：在之前的学习中实际上出现了一个问题。当我们指定一个路由链接时，都需要为其指定一个路由规则，这样做的话随着路由链接的增多，若规则大同小异，则会使得代码复用性差。

说明：动态路由的做法是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性，具体的做法是在vue-router中使用英文的冒号:来定义路由的参数项。

首页
    电影1
    电影2
    电影3
    关于
1
2
3
4
5

{path:'/movie/:id',component:Movie},
1

7.10 获取动态路由参数值的两种方案

说明：在动态路由中，我们可以通过:的方式来指定动态参数值；当时我们不知道如何在组件中获取该参数值。为此，Vue提供了两种做法可用于获取参数对象。

• $route.parms参数对象
• 使用props来接收路由参数

7.11 编程式导航

7.11.1 什么是编程式导航

说明：通过调用API实现导航的方式，叫做编程式导航；与之对应的，通过点击链接实现导航的方式，叫做声明式导航。如：

• 普通页面中点击链接，vue项目中点击都属于声明式导航
• 普通网页中调用location.href跳转到新页面的方式，属于编程式导航

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

说明：Vue-router提供了许多编程式导航的API，其中最常用的两个API分别是：

1. this.$router.push(‘hash地址’)：用于跳转到对应哈希地址的组件
2. this.$router.go(数值n)：n设置为-1可以回退上一个组件页面

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

7.12 命名路由

7.12.1 声明式导航

说明：通过name属性为路由规则定义名称的方式叫做命名路由。

  
  
1
2
3
4
5
6
7
8
9
10
11
12

{path:'/movie',component:Movie,name:'mov'}
1

7.12.2 编程式导航

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

  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

7.13 导航守卫

说明：导航守卫可以控制路由的访问权限。

示意图：

7.13.1 全局导航守卫

说明：全局导航守卫会拦截每个路由规则，从而对每个路由进行访问权限的控制；导航守卫本质上是一个钩子，在使用路由之前时我们都会使用这个钩子。

使用方式：router.beforeEach(fn)

7.13.2 守卫方法的三个形参

to：目标路由对象

from：当前导航正要离开的路由对象

next：一个函数，表示放行；如果在守卫方法中不声明next形参，则默认允许用户访问每一个路由；如果守卫方法声明了next形参，则必须调用next函数后才能访问路由