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

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

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

 5.2 $router.go

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

 6. 命名路由

通过 name 属性为路由规则定义名称的方式，叫做命名路由。示例代码如下：

注意：命名路由的 name 值不能重复，必须保证唯一性！

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

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

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

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

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

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

<!-- 登录名称 -->
<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> 

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

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

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

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

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

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

// 全局路由导航守卫
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()
})

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

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

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'

{
 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 },
 ],
},

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

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

{
 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 },
 ],
},

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

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

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

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