VueRouter 是一个 Vue 插件,用于实现 SPA(single page web application) 应用。
SPA(single page web application) 应用,即单页面应用。整个应用只有一个 .html 文件,通常命名为 index.html 。
SPA 应用使得客户端应用不需要向服务端请求包含完整页面的数据,而是仅请求刷新页面所需的数据,SPA 应用根据请求到的数据,在客户端对页面进行更新。这减少了客户端与服务端之间通信的数据量。
(后文中的示例,都在 Vue CLI 中进行。)
安装 VueRouter
关于 VueRouter 的版本:
- Vue2 使用 vue-router3
- Vue3 使用 vue-router4
安装 vue-router3
- 通过 npm 为 Vue2 安装 vue-router3 :
npm i vue-router@3
搭建 VueRouter 环境
Vuerouter 相关的文件一般放在文件夹 router 中。
-
创建 Vuerouter 实例
- 在文件夹 scr 中创建文件夹 router
- 在文件夹 router 中创建文件 index.js
- 编辑 index.js :
// 引入 VueRouter import VueRouter from 'vue-router' // 引入组件 import BUser from '../pages/B-User-43' import CMoreInfo from '../pages/C-MoreInfo-43.vue' // 创建 VueRouter 实例,即路由器 const router = new VueRouter({ routes: [ { path: '/user', // 路径名称 component: BUser // 与路由关联的组件 }, // 路由 { path: '/moreInfo', component: CMoreInfo } ] // 配置项 routes }) // 默认导出 router export default router
-
为 Vue 实例配置 Vuerouter 实例
- 编辑 main.js :
import Vue from 'vue' import App from './App.vue' // 引入 VueRouter import VueRouter from 'vue-router' // 引入 VueRouter 实例 import router from './router' // 使用插件 VueRouter Vue.use(VueRouter) Vue.config.productionTip = false // 关闭 Vue 的生产提示 new Vue({ render: h => h(App), router // 配置项 router ,配置 VueRouter 实例 }).$mount('#app')
- 编辑 main.js :
VueRouter 实例被称为路由器(router)。
配置路由
通过 VueRouter 配置对象的配置项 route 配置路由。
VueRouter 配置对象
- 配置项 routes ,值为数组,元素为路由对象,用于配置路由。
路由对象
- 配置项 path ,值为字符串,路由的路径名称。
名称需要以
/
开头 - 配置项 component ,值为对象,配置与路由匹配的组件。
- 配置项 children ,值为数组,元素为路由配置对象,配置嵌套路由。
嵌套路由的路径名称不需要以
/
开头
与路由匹配的组件被称为路由组件,一般放在文件夹 src/pages 中。
为 Vue 实例配置 Vuerouter 实例后,Vuerouter 会为 Vue 实例和路由组件实例添加以下属性:
- $route ,路由有关的数据。
- $router ,路由器。
示例:
const router = new VueRouter({
routes: [
{
path: '/user',
conponent: User,
children: [
{
path: 'moreInfo',
conponent: MoreInfo
} // 嵌套路由
]
} // 路由对象
] // 配置项 routes
})
VueRouter 的基本使用
路由的跳转
在模板中使用组件 <router-link> 进行路由的跳转。
组件 <router-link> 是对 HTML 标签 <a> 的封装,最终转换为相应的 HTML标签 <a> 。
组件 <router-link> :
- 属性 to ,指定跳转的路由路径。
- 属性 active-class ,指定被激活时的样式。
示例:
<!-- 跳转路由 -->
<router-link to="/user">link</router-link>
展示路由组件
组件 <router-view> 用于标记展示与路由匹配的组件的位置。
当在使用组件 <router-view> 的组件内进行路由跳转时,VueRouter 会在组件 <router-view> 的位置生成与路由匹配的组件。
当跳转到下一个路由时,VueRouter 会销毁当前正在展示的组件,转而展示下一个路由匹配的组件。
示例:
<router-link to="/user">link</router-link>
<!-- 展示路由组件 -->
<router-view/>
传递参数
向跳转的目标路由组件传递参数。
- 使用指令 v-bind 绑定组件 <router-link> 的属性 to ,然后设置属性 to 的值。
- 属性 to 的值有两种形式:
-
在路由路径中携带参数
使用模板字符串。
在路由路径后添加?
接着添加参数名,并给参数赋值。
多个参数之间使用&
进行分隔。 -
使用跳转路由对象。
配置项 path ,值为字符串,指定路由路径。
配置项 query ,值为对象,属性为要传递的参数。
-
传递给目标路由组件的参数,会被存储在目标路由组件的属性 $route.query 中。
示例:
- 向路由组件传递参数
<!-- 在路由路径字中携带参数 -->
<router-link :to="`/user/moreInfo?sex=${moreInfo.sex}&birthday=${moreInfo.birthday}`">link</router-link>
<!-- 使用跳转路由对象 -->
<router-link :to="{
path: '/user/moreInfo',
query: [
sex: moreInfo.sex,
birthday: moreInfo.birthday
]
}"/>link</router-link>
- 路由组件获取参数
<template>
<div>
<!-- 获取参数 -->
<h>{{$route.query.sex}}</h>
<h>{{$route.query.birthday}}</h>
</div>
</template>
<script>
export default {
// ...
mouted() {
console.log(this.$route.query.sex) // 获取参数
console.log(this.$route.query.birthday)
}
}
</script>
命名路由
为路由设置一个名字,在跳转路由时,可以使用路由的名字进行跳转。
配置命名路由:
在配置路由时,通过配置路由对象的配置项 name ,来为路由添加一个名字。
路由对象
- 配置项 name ,指定路由的名字。
跳转命名路由:
关于组件 <router-link> 的属性 to 的值:
直接使用命名路由的名字
使用跳转路由对象
配置项 name ,值为字符串,指定路由的名字。
示例:
-
配置命名路由
const router = new VueRouter({ routes: [ { name: 'user', // 配置路由的名字 path: '/user', component: User, children: [ { name: 'moreInfo', path: 'moreInfo', component: MoreInfo } ] } ] })
-
跳转命名路由
<!-- 直接使用命名路由的名字 --> <router-link to="user">link</router-link> <!-- 使用跳转路由对象 --> <router-link :to="{ name: 'moreInfo', query: [data] }">link</router-link>
传递参数(补充)
由 Vue 组件的配置项 props 接收路由传递的参数。
用于简化在路由组件中使用参数的代码。
通过配置路由对象的配置项 props ,可以获取向路由组件传递的参数,并使参数可以被路由组件的配置项 props 接收。
路由对象
- 配置项 props ,值为函数。
- 提供一个参数:路由组件的属性 $route ,可以获取传递给路由组件的参数。
- 返回值:对象,对象中的属性可以由路由组件的配置项 props 接收。
示例:
- 配置路由对象的配置项 props
const router = new VueRouter({
routes: [
{
path: '/user',
component: User,
props(route) {
return {
name: route.query.name,
username: route.query.username
}
} // 配置项 props
}
]
})
- 向路由组件传递参数
<router-link :to="{
path: '/user',
query: [
name: data.name,
username: data.username
]
}"/>link</router-link>
- 由路由组件的配置项 props 接收参数
<template>
<div>
<h>{{name}}</h>
<h>{{username}}</h>
</div>
</template>
<script>
export default {
props: [name, username], // 接收参数
mounted() {
console.log(this.name)
console.log(this.username)
}
}
</script>
路由的历史记录
浏览器使用一个栈维护历史记录,添加历史记录有两种方式:
- push ,在栈的上方添加当前历史记录。
- replace ,使用当前历史记录替换栈上方的历史记录。
组件 <router-link> 跳转路由时默认使用 push 添加历史记录。
通过设置组件 <router-link> 的属性 replace 可以使用 replace 添加历史记录。
组件 <router-link> :
- 属性 replace ,值为布尔值,是否使用 replace 添加历史记录。
示例:
<router-link replace to="/user">link</router-link>
编程式路由跳转
使用路由组件的属性 $router 进行路由跳转。
-
$router.push()
- 功能:以 push 的方式跳转路由。
- 接收一个参数:跳转路由对象。
-
$router.replace()
- 功能:以 replace 的方式跳转路由。
- 接收一个参数:跳转路由对象
-
$router.back()
- 功能:根据历史记录,往后跳转路由。
-
$router.forward()
- 功能:根据历史记录,往前跳转路由。
-
$router.go()
- 功能:根据历史记录,按照指定步数跳转路由。
- 接收一个参数:数值,指定跳转步数。
示例:
<template>
<div>
<button @click="push">push</button>
<button @click="back">back</button>
</div>
</template>
<script>
export default {
// ...
methods: {
push() {
this.$router.push({
path: '/user'
query: [
name: this.user.name
username: this.user.username
]
}) // 以 push 的方式跳转路由
},
back() {
this.$router.back() // 根据历史记录,往后跳转路由
}
}
}
</script>
缓存指定的路由组件
使用组件 <keep-alive> ,来缓存路由组件。
在跳转路由时,不销毁之前在组件 <router-view> 上展示的路由组件,而是将其进行缓存。当路由跳转返回到该路由组件时,使用之前缓存的数据渲染该路由组件。
通常用于保留路由组件中的输入性数据。
缓存路由组件
-
缓存所有路由组件
使用组件 <keep-alive> 包裹组件 <router-view> ,VueRouter 将缓存所有在 <router-view> 上展示的路由组件。
-
缓存一个路由组件
设置组件 <keep-alive> 的属性 include ,指定需要缓存的组件。
组件 <keep-alive>
- 属性 include ,值为组件的名字,指定需要缓存的组件,VueRouter 将缓存指定的路由组件。
-
缓存多个路由组件
指定缓存多个组件,使用指令 v-bind 绑定组件 <keep-alive> 的属性 include ,并向其提供元素为组件名的数组,VueRouter 将缓存数组中指定的路由组件。
示例:
<!-- 缓存一个路由组件 -->
<keep-alive include="user">
<router-view/>
</keep-alive>
<!-- 缓存多个路由组件 -->
<keep-alive :include="['user', 'moreInfo']">
<router-view/>
</keep-alive>
VueRouter 的生命周期函数
VueRouter 为路由组件添加了两个生命周期函数
生命周期函数 activated() ,当路由组件在 <router-view> 上被展示时被调用。
生命周期函数 deactivated() ,当路由组件在 <router-view> 上取消展示时被调用。
示例:
<script>
export default {
// ...
activated() {
console.log('is activated')
},
deactivated() {
console.log('is deactivated')
}
}
</script>
路由守卫
路由守卫,拦截路由的跳转,对路由跳转进行监视,在进行路由跳转时会调用相应的函数。
路由元数据
路由元数据,即路由携带的数据。
通过配置路由对象的配置项 meta ,来为路由添加元数据。
路由对象
- 配置项 meta ,值为对象,为路由添加(元)数据。
示例:
const router = new VueRouter({
routes: [
{
path: '/user',
component: User,
meta: {
permission: 'user'
} // 配置元数据
}
]
})
全局路由守卫
全局路由守卫,有两种:
-
全局前置路由守卫
在每次路由跳转之前被调用,拦截路由的跳转,通过 VueRouter 实例的方法 beforeEach() 进行配置。
VueRouter 实例的方法 beforeEach() :
- 接收一个参数:函数,函数提供三个参数:
- to ,对象,路由跳转的目标路由。
- from ,对象,路由跳转的起始路由。
- next ,函数,执行路由跳转,对路由跳转放行。
- 接收一个参数:函数,函数提供三个参数:
-
全局后置路由守卫
在每次路由跳转之后被调用,通过 VueRouter 实例的方法 afterEach() 进行配置。
VueRouter 实例的方法 afterEach() :
- 接收一个参数:函数,函数提供两个参数:
- to ,对象,路由跳转的目标路由。
- from ,对象,路由跳转的起始路由。
- 接收一个参数:函数,函数提供两个参数:
示例:
const router = new VueRouter({
routes: [
{
path: '/user',
component: User,
meta: {
permission: 'user'
},
children: [
{
path: 'moreInfo',
component: MoreInfo,
meta: {
requireAuth: true
}
}
]
}
]
})
// 全局前置路由守卫
router.beforeEach(
(to, from, next) => {
if(to.meta.requireAuth) {
if(from.meta.permission === 'user') {
next() // 执行路由跳转
}
else {
alert('need a permission!')
}
}
else {
next()
}
}
)
// 全局后置路由守卫
router.afterEach(
(to, from) => {
console.log('to:', to)
console.log('from:', from)
}
)
export default router
独享路由守卫
独享路由守卫,即路由自身的路由守卫,当路由跳转到当前路由之前被调用。
通过配置路由对象的配置项 beforeEnter ,来为路由添加独享路由守卫。
路由对象
- 配置项 beforeEnter , 值为函数,函数提供三个参数:
- to ,对象,路由跳转的目标路由。
- from ,对象,路由跳转的起始路由。
- next ,函数,执行路由跳转,对路由跳转放行。
示例:
const router = new VueRouter({
routes: [
{
path: '/user',
component: User,
meta: {
permission: 'user'
},
children: [
{
path: 'moreInfo',
component: MoreInfo,
meta: {
requireAuth: true
},
beforeEnter(to, from, next) {
if(to.meta.requireAuth) {
if(from.meta.permission === 'user') {
next() // 执行路由跳转
}
else {
alert('need a permission!')
}
}
else {
next()
}
} // 配置独享路由守卫
}
]
}
]
})
组件路由守卫
VueRouter 为路由组件提供了两个配置项,用于拦截、监视路由的跳转。
-
配置项 beforeRouterEnter ,值为函数,当路由跳转到当前路由组件之前被调用。函数提供三个参数:
- to ,对象,提供路由跳转的目标路由。
- from ,对象,提供路由跳转的起始路由。
- next ,函数,执行路由跳转,对路由跳转放行。
-
配置项 beforeRouterLeave ,值为函数,在当前路由组件进行路由跳转,离开当前路由组件之前被调用。函数提供三个参数:
- to ,对象,提供路由跳转的目标路由。
- from ,对象,提供路由跳转的起始路由。
- next ,函数,执行路由跳转,对路由跳转放行。
示例:
<script>
export default {
// ...
beforeRouterEnter(to, from, next) {
if(to.meta.requireAuth) {
if(from.meta.isHoldPermission) {
next() // 执行路由跳转
}
else {
alert('need a permission!')
}
}
else {
next()
}
}, // 进入组件前
beforeRouterLeave(to, from, next) {
console.log('to:', to)
console.log('from:', from)
next()
} // 离开组件前
}
</script>
路由路径的模式
URL 路径的 hash 值(哈希值)
URL 路径中在
/#/
之后的路径被称为 hash 值。URL 路径中的 hash 值不会作为请求发送给服务器。
VueRouter 的路由路径有两种模式:
- hash 模式,路由路径将作为 URL 路径的 hash 值。
- history 模式,路由路径将作为真实的 URL 路径,而不是 hash 值。
通过配置 VueRouter 配置对象的配置项 modle ,设置路由路径的模式。
VueRouter 配置对象
- 配置项 modle,值为字符串,指定路由路径的模式,可选模式:
- hash
- history
示例:
const router = new VueRouter({
modle: 'hash',
routes: [
{
path: '/user',
component: User
}
]
})
标签:插件,Vue,配置,VueRouter,跳转,组件,router,路由 From: https://www.cnblogs.com/SHUIDESHUI/p/16804561.html