文章目录
安装
npm
npm install vue-router@4
yarn
yarn add vue-router@4
使用
router-link
<router-link to="页面路由地址"></router-link>
router-view
// 第一种方式
<router-view></router-view>
// 第二种方式
<RouterView/>
路由配置
// 文件:src/router/index.js
// 1. 定义路由组件.
// 也可以从其他文件导入组件
const Home = { template: '<div>Home</div>' }
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('/About.vue')}, // 使用懒加载
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
// 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
app.mount('#app')
// 现在,应用已经启动了!
路由跳转
// 方式一
<router-link to="页面路由地址"></router-link>
// 方式二
router.push(页面路由地址)
// 方式三
router.push({
name:页面路由name
})
路由组件传参
声明式传参
params
显示参数
//路由参数配置
const router = new VueRouter({
routes: [{
path: '/about/:id',
component: User
}]
})
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>
不显示参数
//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//声明式导航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳转</router-link>
query
//路由参数配置
const router = new VueRouter({
routes: [{
name: 'user1',
path: '/about',
component: User
}]
})
//使用path
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>
//使用name
<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>
编程式传参
params
显示参数
import {useRouter} from 'vue-router'
const router = useRouter()
// path 方式
//路由配置
{
path: '/child/:id',
component: Child
}
//编程式使用
router.push({
path:'/child/${id}',
})
// name 方式
//路由配置
{
path: '/child:id',
component: Child,
name:Child
}
//编程式使用
router.push({
name:'Child',
params:{
id:123
}
})
不显示参数
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//编程式使用
router.push({
name:'Child',
params:{
id:123
}
})
query
import {useRouter} from 'vue-router'
const router = useRouter()
//路由配置
{
path: '/child',
component: Child,
name:Child
}
//编程式使用
//name方式
router.push({
name:'Child',
query:{
id:1
}
})
//path方式
router.push({
path:'/child',
query:{
id:1
}
})
props
对象模式
const routes = [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]
函数模式
const routes = [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: { newsletterPopup: false }
}
]
获取参数
params
import {useRoute} from 'vue-router'
const route = useRoute()
route.params.xxx
query
import {useRoute} from 'vue-router'
const route = useRoute()
route.query.xxx
路由守卫
路由守卫参数
to:要跳转到的目标路由
from:从当前哪个路由进行跳转
next:不做任何阻拦,直接通行
必须要确保 next函数 在任何给定的导航守卫中都被调用过一次。它可以出现多次,但是只能在所有的逻辑路径都不重叠的情况下,否则会报错。
全局路由守卫
全局前置守卫
使用方式:main.js中配置
// 在路由跳转前触发
router.beforeEach((to,from,next)=>{})
在路由跳转前触发,这个钩子作用主要是用于登录验证,也就是路由还没跳转提前告知,以免跳转了再通知就为时已晚
全局后置守卫
// 路由跳转完成后触发
// beforeEach和beforeResolve之后
// beforeRouteEnter(组件内守卫)之前
router.afterEach((to,from)=>{})
和beforeEach相反,它是在路由跳转完成后触发,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。钩子不会接受next函数也不会改变导航本身
全局解析守卫
// 路由跳转前触发
// beforeEach 和 组件内beforeRouteEnter 之后
// afterEach之前
router.beforeResolve((to,from,next)=>{})
这个钩子和beforeEach类似,也是路由跳转前触发,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,即在 beforeEach 和 组件内beforeRouteEnter 之后,afterEach之前调用
组件内守卫
beforeRouteEnter
// 在组件生命周期beforeCreate(创建之前)阶段触发
beforeRouteEnter(to, from, next) {
console.log('组件内路由前置守卫 beforeRouteEnter', this) // 访问不到this
next((vm) => {
console.log('组件内路由前置守卫 vm', vm) // vm 就是this
})
},
beforeRouteUpdate
// 同一页面,刷新不同数据时调用
beforeRouteUpdate (to, from, next) {
// 可以访问组件实例
}
beforeRouteLeave
// 导航离开该组件的对应路由时调用
beforeRouteLeave (to, from, next) {
// 可以访问组件实例
}
路由独享守卫
beforeEnter
在router.js中使用,路由独享守卫是在路由配置页面单独给路由配置的一个守卫
// 在路由跳转前触发
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
导航流程 及 导航流程图
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫(2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫(2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter
守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。