vue3.0 从入门到入土---复习路由_m0_61083409

irpas 02-07 4448

前端路由的概念与原理

?vue-router 的基本用法

?vue-router 的高级用法

后台管理案例

?总结

前端路由的概念与原理

1. 什么是路由

路由（英文：router）就是对应关系。路由分为两大类 ① 后端路由 ② 前端路由

2. 回顾：后端路由

后端路由指的是：请求方式、请求地址与 function 处理函数之间的对应关系。在 node.js 课程中，express 路由的基本用法如下

3. SPA 与前端路由

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

结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！

4. 什么是前端路由

通俗易懂的概念： Hash 地址与组件之间的对应关系

5. 前端路由的工作方式

① 用户点击了页面上的路由链接② 导致了 URL 地址栏中的 Hash 值发生了变化③ 前端路由监听了到 Hash 地址的变化④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

6. 实现简易的前端路由

步骤1：导入并注册 MyHome、MyMovie、MyAbout 三个组件。示例代码如下：

步骤2：通过标签的 is 属性，动态切换要显示的组件。示例代码如下：

步骤3：在组件的结构中声明如下 3 个链接，通过点击不同的链接，切换浏览器地址栏中的 Hash 值：

步骤4：在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化，动态切换要展示的组件的名称：

vue-router 的基本用法

1. 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

2. vue-router 的版本

vue-router 目前有 3.x 的版本和 4.x 的版本。其中

vue-router 3.x 只能结合 vue2 进行使用vue-router 4.x 只能结合 vue3 进行使用vue-router 3.x 的官方文档地址：https://router.vuejs.org/zh/vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

3. vue-router 4.x 的基本使用步骤

① 在项目中安装 vue-router② 定义路由组件③ 声明路由链接和占位符④ 创建路由模块⑤ 导入并挂载路由模块

3.1 在项目中安装 vue-router

在 vue3 的项目中，只能安装并使用 vue-router 4.x。安装的命令如下：

3.2 定义路由组件

在项目中定义 MyHome.vue 、 MyMovie.vue 、 MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换：

3.3 声明路由链接和****占位符

可以使用标签来声明路由链接，并使用标签来声明路由占位符。

3.4 创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：

① 从 vue-router 中按需导入两个方法② 导入需要使用路由控制的组件③ 创建路由实例对象④ 向外共享路由实例对象⑤ 在 main.js 中导入并挂载路由模块

从 vue-router 中按需导入两个方法

导入需要使用路由控制的组件

创建路由实例对象

向外共享路由实例对象

在 main.js 中导入并挂载路由模块

vue-router 的高级用法

1. 路由重定向

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

2. 路由高亮

可以通过如下的两种方式，将激活的路由链接进行高亮显示：

① 使用默认的高亮 class 类② 自定义路由高亮的 class 类

2.1 默认的高亮 class 类

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

2.2 自定义路由高亮的 class 类

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

3. 嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

① 声明子路由链接和子路由占位符② 在父路由规则中，通过 children 属性嵌套声明子路由规则

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

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

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

在 router.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则。

注意：子路由规则的 path 不要以 / 开头！

4. 动态路由匹配

思考：有如下 3 个路由链接：

定义如下 3 个路由规则，是否可行

缺点：路由规则的复用性差。

4.1 动态路由的概念

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

4.2 $route.params 参数对象

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

4.3 使用 props 接收路由参数

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

5. 编程式导航

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

普通网页中点击链接、vue 项目中点击都属于声明式导航普通网页中调用 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 使用命名路由实现声明式导航

为标签动态绑定 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’)

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

后台管理案例

1. 案例效果

2. 案例用到的知识点

命名路由路由重定向导航守卫嵌套路由动态路由匹配编程式导航

实现步骤

1. 安装并配置 vue-router 4.x2. 展示 Login.vue 登录组件3. 模拟并实现登录功能4. 通过路由渲染 Home.vue5. 实现退出登录的功能6. 全局控制路由的访问权限7. 将左侧菜单改造为路由链接8. 渲染用户管理页面的数据9. 实现跳转到用户详情页的功能10. 开启路由的 props 传参11. 通过编程式导航实现后退功能

1. 安装并配置 vue-router 4.x

1. 运行如下的命令，安装 vue-router ：

npm install vue-router@next -S

在 src 目录下新建 router.js 路由模块：

// 1. 按需导入对应的函数 import { createRouter, createWebHashHistory } from 'vue-router' // 2. 创建路由对象 const router = createRouter({ history: createWebHashHistory(), routes: [], }) // 3. 向外共享路由实例对象 export default router

3. 在 main.js 入口文件中导入并挂载路由对象：

// 1. 导入路由模块 import router from './router' const app = createApp(App) // 2. 挂载路由对象 app.use(router) app.mount('#app')

2. 展示 Login.vue 登录组件

1. 在 router.js 模块中导入 Login.vue 组件：

import Login from ‘./components/MyLogin.vue’

2. 声明路由规则如下

routes: [ // 路由重定向 { path: '/', redirect: '/login' }, { path: '/login', component: Login }, ]

3. 在 App.vue 组件中声明路由占位符：

<template>  <router-view></router-view> </template> <script> export default { name: 'MyApp', } </script> <style lang="less" scoped> </style>

3. 模拟并实现登录功能

1. 在 MyLogin.vue 组件中声明如下的 data 数据

data() { return { username: '', password: '', } },

2. 为用户名和密码的文本框进行 v-model 双向数据绑定

<div class="form-group form-inline"> <label for="username">登录名称</label> <input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model="username"> </div>  <div class="form-group form-inline"> <label for="password">登录密码</label> <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model="password"> </div>

3. 为登录按钮绑定点击事件处理函数：

4. 在 methods 中声明 onLoginClick 事件处理函数如下：

methods: { onLoginClick() { // 判断用户名和密码是否正确 if (this.username === 'admin' && this.password === '123456') { // 登录成功，跳转到后台主页 this.$router.push('/home') // 模拟存储 Token 的操作 return localStorage.setItem('token', 'Bearer xxx') } // 登录失败，清除 Token localStorage.removeItem('token') }, },

4. 通过路由渲染 Home.vue

1. 在 router.js 中导入 Home.vue 组件

import Home from ‘./components/MyHome.vue’

2. 在 routes 路由规则的数组中，声明对应的路由规则：

routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, // Home 组件的路由规则 { path: '/home', component: Home }, ]

3. 渲染 Home.vue 组件的基本结构：

5. 实现退出登录的功能

1. 在 MyHeader.vue 组件中，为退出登录按钮绑定 click 事件处理函数

2. 在 methods 中声明如下的事件处理函数：

export default { name: 'MyHeader', methods: { // 退出按钮的点击事件处理函数 onLogout() { // 移除 Token localStorage.removeItem('token') // 强制跳转到“登录页面” this.$router.push('/login') }, }, }

6. 全局控制路由的访问权限

1. 在 router.js 模块中，通过 router 路由实例对象，全局挂载路由导航守卫

// 全局路由导航守卫 router.beforeEach((to, from, next) => { // 如果用户访问的是登录页面，直接放行 if (to.path === '/login') return next() // 获取 Token 值 const token = localStorage.getItem('token') if (!token) { // Token 值不存在，强制跳转到登录页面 return next('/login') } // 存在 Token 值，直接放行 next() })

7. 将左侧菜单改造为路由链接

. 打开 MyAside.vue 组件，把 li 内部的纯文本升级改造为组件：

2. 打开 Home.vue 组件，在右侧内容主体区域中声明子路由的占位符：

3. 在 router.js 中导入左侧菜单对应的组件：

import Users from './components/menus/MyUsers.vue' import Rights from './components/menus/MyRights.vue' import Goods from './components/menus/MyGoods.vue' import Orders from './components/menus/MyOrders.vue' import Settings from './components/menus/MySettings.vue'

4. 通过 children 属性，为 home 规则定义子路由规则如下：

{ path: '/home', component: Home, // 用户访问 /home 时，重定向到 /home/users redirect: '/home/users', // 子路由规则 children: [ { path: 'users', component: Users }, { path: 'rights', component: Rights }, { path: 'goods', component: Goods }, { path: 'orders', component: Orders }, { path: 'settings', component: Settings }, ], },

8. 渲染用户管理页面的数据

1. 在 MyUsers.vue 组件中，通过 v-for 指令循环渲染用户列表的数据：

<tbody> <tr v-for="(item, i) in userlist" :key="item.id"> <td>{{i + 1}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> <td>{{item.position}}</td> <td>详情</td> </tr> </tbody>

9. 实现跳转到用户详情页的功能

1. 在 MyUsers.vue 组件中，渲染详情页的路由链接如下

2. 在 router.js 中导入用户详情页组件：

import UserDetail from ‘./components/user/MyUserDetail.vue’

3.在 home 规则的 children 节点下，声明用户详情页的路由规则

{ path: '/home', component: Home, redirect: '/home/users', children: [ { path: 'users', component: Users }, { path: 'rights', component: Rights }, { path: 'goods', component: Goods }, { path: 'orders', component: Orders }, { path: 'settings', component: Settings }, // 用户详情页的路由规则 { path: 'users/:id', component: UserDetail }, ], },

10. 开启路由的 props 传参

1. 在 router.js 模块中，为用户详情页的路由规则开启 props 传参：

{ path : ‘users/:id’ , component : UserDetail , props : true },

2. 在 MyUserDetail.vue 组件中声明 props 参数：

export default { name: 'MyUserDetail', props: ['id'], }

3. 在 MyUserDetail.vue 组件的结构中直接使用路由参数

11. 通过编程式导航实现后退功能

1. 在 MyUserDetail.vue 组件中，为后退按钮绑定点击事件处理函数：

2. 在 methods 中声明 goBack 事件处理函数如下：

export default { name: 'MyUserDetail', props: ['id'], methods: { // 编程式导航实现后退功能 goBack() { this.$router.go(-1) }, }, } 总结

① 能够知道如何在 vue 中配置路由

createRouter、app.use(router)