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

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

vue-router 的基本用法

1. 什么是 vue-router

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

2. vue-router 的版本

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

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')

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

后台管理案例

1. 案例效果

1. 案例效果

**2. 案例用到的知识点 **

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

实现步骤

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

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

2. 运行如下的命令，安装 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

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

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

1. **展示 **Login.vue 登录组件

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

import Login from './components/MyLogin.vue'

1. 声明路由规则如下

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

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

<template>
 <!-- 路由的占位符 -->
 <router-view></router-view>
</template> <script>
export default {
 name: 'MyApp', }
</script>
<style lang="less" scoped>
</style>

1. 模拟并实现登录功能

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

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

1. 为用户名和密码的文本框进行 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> 

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

<button type="button" class="btn btn-primary"
@click="onLoginClick">登录</button>

1. 在 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')
},
},

1. **通过路由渲染 **Home.vue

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

import Home from './components/MyHome.vue'

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

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

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

<template>
 <div class="home-container">
 <!-- 头部组件 -->
 <my-header></my-header>
 <!-- 主体区域 -->
 <div class="home-main-box">
<!-- 左侧边栏区域 -->
 <my-aside></my-aside>
 <!-- 右侧内容主体区域 -->
 <div class="home-main-body"></div>
 </div>
 </div>
</template> 

1. 实现退出登录的功能

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

<button type="button" class="btn btn-light" @click="onLogout">退出
登录</button>

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

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

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

2. 在 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()
})

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

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

<template>
 <div class="layout-aside-container">
 <!-- 左侧边栏列表 -->
 <ul class="user-select-none menu">
 <li class="menu-item">
 <router-link to="/home/users">用户管理</router-link>
 </li>
 <li class="menu-item">
 <router-link to="/home/rights">权限管理</router-link>
 </li>
 <li class="menu-item">
 <router-link to="/home/goods">商品管理</router-link>
 </li>
 <li class="menu-item">
 <router-link to="/home/orders">订单管理</router-link>
 </li>
 <li class="menu-item">
 <router-link to="/home/settings">系统设置</router-link>
 </li>
 </ul>
 </div>
</template> 

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

<template>
 <div class="home-container">
 <!-- 头部组件 -->
 <my-header></my-header>
 <!-- 主体区域 -->
 <div class="home-main-box">
 <!-- 左侧边栏区域 -->
 <my-aside></my-aside>
 <!-- 右侧内容主体区域 -->
 <div class="home-main-body">
 <!-- **子路由的占位符** -->
 <router-view></router-view>
 </div>
 </div>
 </div>
</template> 

1. 在 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'

1. 通过 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 },
 ],
},

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

2. 在 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> 

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

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

<td>
 <router-link :to="'/home/users/' + item.id">详情</router-link>
</td> 

1. 在 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 },
 ],
},

1. **开启路由的 **props 传参

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

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

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

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

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

<template>
 <button type="button" class="btn btn-light btn-sm">后退</button>
 <h4 class="text-center">用户详情 --- {{id}}</h4>
</template>

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

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

<template>
 <button type="button" class="btn btn-light btn-sm"
@click="goBack">后退</button>
 <h4 class="text-center">用户详情 --- {{id}}</h4>
</template>

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

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

总结

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

createRouter、app.use(router)

② 能够知道如何使用嵌套路由

通过 children 属性进行路由嵌套、子路由的 hash 地址不要以 / 开头

③ 能够知道如何实现动态路由匹配

使用冒号声明参数项、this.$route.params、props: true

④ 能够知道如何使用编程式导航

this.$router.push、this.$router.go(-1)

⑤ 能够知道如何使用全局导航守卫

路由实例.beforeEach((to, from, next) => { })