vue从入门到入土---复习 路由

步骤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</span><span style="color:#404040;">.</span><span style="color:#c00000;">push</span><span style="color:#404040;">('hash 地址')</span> <span style="color:#404040;"></span><span style="color:#404040;">跳转到指定 Hash 地址，从而展示对应的组件</span> <span style="color:#404040;">② this.</span><span style="color:#c00000;">router.go(数值 n) 实现导航历史的前进、后退

**5.2 router.** </span><span style="color:#c00000;"> **push** </span> <span style="color:#404040;">调用 this.</span><span style="color:#c00000;">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. 案例效果

1. 案例效果

2. 案例用到的知识点

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

实现步骤

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

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

1. 运行如下的命令，安装vue-router： npminstall 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组件： importLoginfrom'./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. 为 登录按钮 绑定点击事件处理函数：

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

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组件 importHomefrom'./components/MyHome.vue' 2. 在routes路由规则的数组中，声明对应的路由规则：

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

3. 渲染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> 

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

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

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内部的纯文本升级改造为组件：

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

2. 打开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> 

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组件中，渲染详情页的 路由链接 如下

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

2. 在router.js中导入 用户详情页 组件： importUserDetailfrom'./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组件的结构中直接使用路由参数

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

11. 通过编程式导航实现后退功能 1. 在MyUserDetail.vue组件中，为 后退按钮 绑定点击事件处理函数：

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

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