Contents
6. Vue-Router路由¶
6.1. 1.什么是路由¶
用Vue.js创建的项目是单页面应用，如果想要在项目中模拟出类似于页面跳转的效果，就要使用路由。
其实，我们不能只从字面的意思来理解路由，从字面上来看，很容易把路由联想成“路由器”。路由器是连接两个或多个网络的硬件设备，而此处我们所说的路由，是指在一个应用程序中连接多个页面（组件）的一种配置。
在一个全栈项目中，路由分为前端路由和后端路由。
6.1.1. 1.1 后端路由¶
先来看一下后端路由，例如项目的服务器网址是http://192.168.1.10:8080，在这个站点中提供了3个界面，分别是：
页面1，网址
http://192.168.1.10:8080/index.html页面2，网址
http://192.168.1.10:8080/about.html页面3，网址
http://192.168.1.10:8080/news.html
当在浏览器中输入http://192.168.1.10:8080/index.html时，
Web服务器接收到这个请求，然后把“/index.html”解析出来，再找到index.html文件并响应给浏览器，
这就是服务器端的路由分发。
6.1.2. 1.2 前端路由¶
虽然前端路由和后端路由在实现技术上有些差别，但是实现的原理是一样的。在HTML5的history API发布之前，前端路由功能是通过哈希散列计算的，因为哈希算法可以兼容低版本的浏览器，例如：
http://192.168.1.10:8080/#/index.htmlhttp://192.168.1.10:8080/#/about.htmlhttp://192.168.1.10:8080/#/news.html
由于Web服务不会解析#后面的内容，而JavaScript可以获取#后面的内容，那么就可以使用window.location.hash来读取，通过这种方法来匹配到不同的功能上。使用哈希的方式还有一个很大的优点，当哈希的值改变后，不会导致浏览器的刷新。
6.2. 2.在Vue中使用路由¶
用Vue.js+Vue Router创建单页应用非常简单。要在Vue.js应用程序中使用路由，需要先安装vue-router，在当前项目下启动命令行工具，命令如下：
$ npm install vue-router
如果在一个模块化工程中使用它，必须通过Vue.use()明确安装路由功能：
createApp(App).use(router).mount('#app')
如果使用脚手架工具创建项目，则路由的配置在/src/router/index.js文件中。
在脚手架工具创建的项目中使用路由，需要在/src/router/index.js路由配置文件创建路由对象，然后将路由配置文件引入main.js入口文件并注册到Vue实例上。
上面的流程操作完成后，就可以在页面组件中使用路由的内置组件router-link和router-view进行页面跳转了。
/router/index.js文件代码如下：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
/main.js文件代码如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
/App.vue文件代码如下：
<template>
<nav>
<!-- 用于跳转路由的连接。to为跳转地址-->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/globzj">全局组件</router-link> |
<router-link to="/cachao1">插槽用法1</router-link> |
<router-link to="/jmcc">插槽用法2-具名插槽</router-link> |
<router-link to="/zyychachao">作用域插槽</router-link> |
</nav>
<!-- 路由占位符 -->
<router-view></router-view>
</template>
<script>
export default {}
</script>
<style></style>
6.3. 3.动态路由¶
很多时候，我们需要从一个页面跳转到另一个页面，并且携带参数，在这种应用场景下就可以使用动态路由。动态路由可以将某种模式匹配到所有路由，全部映射到同一个组件上。
例如，我们需要访问一个商品页面的组件goods.vue文件，对于所有要访问这个页面组件的用户来说，都要使用这个组件进行视图渲染。那么就可以在vue-router的路由路径中使用“动态路径参数”来达到这个效果。
一个“路径参数”使用冒号：标记。当匹配到一个路由时，参数值会被设置到this.$ route.params，这样便可以在每个组件内使用。
views/GoodsView.vue
<template>
<div>
商品详情页面
<p>
商品 ID：{{ $route.params.gid }}
</p>
</div>
</template>
<script>
export default {
name: 'GoodsView'
}
</script>
<style scoped>
</style>
/router/index.js文件代码如下：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/goods/:gid',
name: 'Goods',
component: () => import('../views/GoodsView')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
/App.vue文件代码如下：
<template>
<nav>
<!-- 用于跳转路由的连接。to为跳转地址-->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/goods/1001">动态路由-查看商品</router-link> |
</nav>
<!-- 路由匹配的组合会渲染到router-view-->
<router-view/>
</template>
<script>
export default {}
</script>
<style></style>
在浏览器中运行，项目根目录下会显示“查看商品”的超链接，效果如图6.3所示。单击超链接，页面跳转到/goods商品详情路由下，并渲染Goods.vue视图，在商品详情页面中会显示传递过来的商品ID参数值。
可以在一个路由中设置多段“路径参数”，对应的值都会设置到$ route.params中。
除了$ route.params外，$ route对象还提供了其他有用的信息，例如，\(route.query（在URL中设置查询参数）、\) route.hash等。
6.4. 4.嵌套模式路由¶
实际生活中的应用界面通常由多层嵌套的组件组合而成，在配置路由的过程中，需要对URL进行分层管理，使每个路由都能按照嵌套的顺序进行编写。
我们还是以商城类应用为例，在商品分类页面，单击某一个类别，要跳转到商品的列表页面，那么该商品列表页面的路由就由商品分类+商品列表组成。
路由嵌套示例
/views/Classify.vue文件代码如下：
<template>
<div>
<div>
<!-- 用于跳转路由的连接。to为跳转地址-->
<router-link to="/classify/list/1">男裝</router-link> |
<router-link to="/classify/list/2">女装</router-link> |
<router-link to="/classify/list/3">童装</router-link> |
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'ClassifyView'
}
</script>
<style scoped>
</style>
/views/GoodsList.vue文件代码如下：
<template>
<div>
商品列表主页 --- 分类 id: {{ $route.params.tid }}
</div>
</template>
<script>
export default {
name: 'GoodsList'
}
</script>
<style scoped>
</style>
要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用children配置。
/router/index.js文件代码如下：
{
path: '/classify',
name: 'Classify',
component: () => import('../views/ClassifyView'),
children: [
{
path: '/classify/list/:tid',
name: 'GoodList',
component: () => import('../views/GoodsList')
}
]
}
6.5. 5.编程式导航¶
除了使用<router-link>创建a标签来定义导航链接，还可以借助router的实例方法通过编写代码实现导航。
页面导航的两种方式
A.声明式导航：通过点击链接的方式实现的导航 B.编程式导航：调用js的api方法实现导航
V-router常见的导航方式
/*
Vue-Router中常见的导航方式：
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );
*/
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router_3.0.2.js"></script>
</head>
<body>
<!-- 被 vm 实例所控制的区域 -->
<div id="app">
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
<router-link to="/register">Register</router-link>
<!-- 路由占位符 -->
<router-view></router-view>
</div>
<script>
const User = {
props: ['id', 'uname', 'age'],
template: `<div>
<h1>User 组件 -- 用户id为: {{ id }} -- 姓名为: {{ uname }} -- 年龄为: {{ age }}</h1>
<button @click="goRegister">跳转到注册页面</button>
</div>`,
methods: {
goRegister() {
this.$router.push('/register')
}
},
}
const Register = {
template: `<div>
<h1>Register 组件</h1>
<button @click="goBack">后退</button>
</div>`,
methods: {
goBack() {
this.$router.go(-1)
}
}
}
// 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
{path: '/', redirect: '/user'},
{
// 命名路由
name: 'user',
path: '/user/:id',
component: User,
props: route => ({uname: 'zs', age: 20, id: route.params.id})
},
{path: '/register', component: Register}
]
})
// 创建 vm 实例对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: {},
// 挂载路由实例对象
// router: router
router
})
</script>
</body>
</html>
6.5.1. 5.1 router.push()方法参数规则¶
/*
字符串(路径名称)
router.push('/home')
对象
router.push({path: '/home'})
命名的路由(传递参数)
router.push({name: '/user',params: {userId: 123}})
带查询参数,变成 /register?uname=lisi
router.push({ path: '/register', query: {uname: 'lisi' }})
*/
6.6. 6.命名路由¶
在开发过程中，如果每次使用路由跳转的过程都用path会比较麻烦，如果能通过一个名称来标识一个路由，则会更加方便。
在vue-router中就有关于命名路由的配置项，创建Router实例的时候，在routes配置中可以给某个路由设置名称，代码如下：
{
// 命名路由
path: '/userrouter/:userId',
name: 'userrouter',
component: () => import('../views/mmRouterView')
}
要连接到一个命名路由，可以给router-link的to属性传一个对象，代码如下：
<router-link :to="{ name: 'userrouter',params: {userId: 123} }">命名router</router-link>
使用代码调用router.push()的效果是一样的，代码如下：
mmRouterView.vue
<template>
<h1>我的参数是: {{ $route.params.userId }}</h1>
<button @click="gorouter">跳转到命名router页面</button>
</template>
<script>
export default {
name: 'mmRouterView',
methods: {
gorouter () {
this.$router.push({ name: 'userrouter', params: { userId: 1234567 } })
}
}
}
</script>
<style scoped>
</style>
6.7. 7.命名视图¶
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有
sidebar (侧导航) 和 main (主内容)
两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果
router-view 没有设置名字，那么默认为 default。
<router-view class="view left-sidebar" name="LeftSidebar"></router-view>
<router-view class="view main-content"></router-view>
<router-view class="view right-sidebar" name="RightSidebar"></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用
components 配置 (带上 s)：
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
components: {
default: Home,
// LeftSidebar: LeftSidebar 的缩写
LeftSidebar,
// 它们与 `<router-view>` 上的 `name` 属性匹配
RightSidebar,
},
},
],
})
以上案例相关的可运行代码请移步这里.
6.8. 8.重定向¶
在实际开发中，当对一个页面的功能操作完成后，需要自动完成跳转，或者在访问某个路由链接时，需要自动访问另外一个链接，这就要用到路由的重定向配置。重定向可以通过routes配置来完成，代码如下：
{
path: '/routerViews',
redirect: '/user'
},
重定向的目标也可以是一个命名的路由：
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
也可以重定向到相对位置：
const routes = [
{
// 将总是把/users/123/posts重定向到/users/123/profile。
path: '/users/:id/posts',
redirect: to => {
// 该函数接收目标路由作为参数
// 相对位置不以`/`开头
// 或 { path: 'profile'}
return 'profile'
},
},
]
别名
const routes = [
{
path: '/users',
component: UsersLayout,
children: [
// 为这 3 个 URL 呈现 UserList
// - /users
// - /users/list
// - /people
{ path: '', component: UserList, alias: ['/people', 'list'] },
],
},
]
参考链接：
https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html
6.9. 9.路由的模式¶
在讲解vue-router的路由模式之前，首先要认识路由的组成。每个路由都是由多个URL组成，使用不同的URL可以导航到不同的位置。对于服务器端访问来说，HTTP请求是无状态的，所以当请求服务器不同的网址来切换页面时，都会重新进行请求。
而在使用vue-router进行前端页面切换时，并没有让浏览器刷新，这是因为借助了浏览器的history API，使得页面跳转而浏览器不执行刷新操作，这样页面的状态就被维持在浏览器中了。
vue-router中默认为哈希模式，URL网址的格式为http://localhost:8080/#/，在URL中带有#号。可以在router实例中修改路由的模式，代码如下：
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
当路由的模式设置为history模式后，URL网址中的#就会被去除了。
6.10. 10.导航守卫¶
导航守卫又称为路由守卫，用来实时监控路由跳转的过程，在路由跳转的各个过程中执行相应的钩子函数，这就类似于Vue的生命周期钩子，在实际开发中经常被使用。
例如，当用户单击一个页面时，如果当前用户未登录，就自动跳转到登录页面；如果已经登录，就让用户正常进入。
导航守卫分为全局守卫、路由独享守卫和组件内守卫，这3种方式应用的场景不同，都有自己的钩子函数，具体内容如下。
6.10.1. 10.1 全局守卫¶
全局守卫的钩子函数有3个，分别是：
router.beforeEach（全局前置守卫）
router.beforeResolve（全局解析守卫）
router.afterEach（全局后置守卫）
1.全局前置守卫¶
可以使用router.beforeEach注册一个全局前置守卫，代码如下：
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫方法接收两个参数：
可以返回的值如下:
false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用
`router.push()<https://router.vuejs.org/zh/api/#push>`__ 一样，你可以设置诸如replace: true或name: 'home'之类的配置。当前的导航被中断，然后进行一个新的导航，就和from一样。
router.beforeEach(async (to, from) => {
if (
// 检查用户是否已登录
!isAuthenticated &&
// 避免无限重定向
to.name !== 'Login'
) {
// 将用户重定向到登录页面
return { name: 'Login' }
}
})
如果遇到了意料之外的情况，可能会抛出一个
Error。这会取消导航并且调用
`router.onError() <https://router.vuejs.org/zh/api/#onerror>`__
注册过的回调。
如果什么都没有，undefined 或返回
true，则导航是有效的，并调用下一个导航守卫
以上所有都同 ``async`` 函数 和 Promise 工作方式一样：
router.beforeEach(async (to, from) => {
// canUserAccess() 返回 `true` 或 `false`
const canAccess = await canUserAccess(to)
if (!canAccess) return '/login'
})
2.全局解析守卫¶
和全局前置守卫类似，其区别是在跳转被确认之前，同时在所有组件内守卫和异步路由组件都被解析之后，解析守卫才调用。
你可以用 router.beforeResolve 注册一个全局守卫。
这和 router.beforeEach 类似，因为它在
每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用。
3.全局后置钩子¶
router.afterEach和全局前置守卫类似，其区别是在跳转被确认之前，同时在所有组件内守卫和异步路由组件都被解析之后，解析守卫才调用。
4.路由独享守卫¶
独享守卫只有一种：beforeEnter。该守卫接收的参数与全局守卫是一样的，但是该守卫只在其他路由跳转至配置有beforeEnter路由表信息时才生效。
router配置文件的配置如下：
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// reject the navigation
return false
},
},
]
beforeEnter 守卫 只在进入路由时触发，不会在
params、query 或 hash 改变时触发。
例如，从 /users/2 进入到 /users/3 或者从 /users/2#info
进入到 /users/2#projects。
它们只有在 从一个不同的 路由导航时，才会被触发。
6.10.2. 10.2 组件内守卫¶
组件内守卫是在组件内部直接定义的，有以下3个钩子函数。
beforeRouteEnter：进入该路由前执行。
beforeRouteUpdate：该路由的动态参数值发生改变时执行。
beforeRouteLeave：离开该路由时执行。
const UserDetails = {
template: `...`,
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
}
beforeRouteEnter守卫不能访问this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，可以通过传一个回调给next访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，代码如下：
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
注意 beforeRouteEnter是支持向next传递回调的唯一守卫。
对于beforeRouteUpdate和beforeRouteLeave来说，this已经可用了，所以不支持传递回调，因为没有必要。