文章目录
- Vue Router
- 1. 基本使用
- router-view
- 2. 路由跳转
- 2.1 router-link
- 2.2 编程式导航
- 2.3 replace
- 3. 路由传参
- 4. 嵌套路由
- 5. 命令视图
- 6. 重定向和别名
- 6.1 重定向
- 6.2 别名
- 7. 路由守卫
- 7.1 全局前置守卫
- 7.2 全局后置守卫
- 案例:加载滚动条
- 8. 路由元信息
- 9. 路由过渡动效
- 10. 滚动行为
- 11. 动态路由
- 11.1 添加路由
- 11.2 添加嵌套路由
- 11.3 删除路由
- 11.4 查看现有路由
Vue Router
Vue Router 官方文档
安装
# npm
npm install vue-router@4
# yarn
yarn add vue-router@4
1. 基本使用
//引入路由对象
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 路由类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
path: '/',
name: 'index',
component: () => import('@/views/index.vue'), /* 路由懒加载 */
}, {
path: '/a',
name: 'a',
component: () => import('@/components/A.vue'),
}, {
path: '/b',
name: 'b',
component: () => import('@/components/B.vue'),
}, {
path: '/c',
name: 'c',
component: () => import('@/components/C.vue'),
}]
/* 路由模式
createWebHistory: h5
createWebHashHistory: HASH
createMemoryHistory: 服务端渲染时
*/
const router = createRouter({
history: createWebHistory(),
routes
})
//导出router
export default router
// mian.ts
import { createApp } from 'vue'
import router from '@/router/index'
const app = createApp()
app.use(router)
app.mount('#app')
router-view
<template>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</template>
2. 路由跳转
2.1 router-link
router-link
和 a标签
的区别:
router-link
跳转不会刷新页面,a标签
跳转会刷新页面
<template>
<router-link to="/">首页</router-link> <!-- 通过path跳转 -->
<router-link to="/a">A</router-link>
<!-- <router-link to="/b">B</router-link> -->
<a href="/b">B</a>
<router-link :to="{name: 'c'}">C</router-link> <!-- 通过name跳转 -->
<hr class="mtb20" />
<router-view></router-view>
</template>
2.2 编程式导航
import { useRouter } from 'vue-router';
const router = useRouter()
const goTo = () => {
// 1. 字符串:参数为path router.push('/a')
// 2. 对象模式:方便传参 router.push({name: 'a'}) 或 router.push({path: '/a'})
// router.push({name: 'a'})
router.push({path: '/b'})
}
2.3 replace
采用replace
进行页面的跳转会同样也会创建渲染新的Vue组件,但是在history
中其不会重复保存记录,而是替换原有的vue组件;
router-link
<router-link replace to="/">首页</router-link>
编程式导航
// router.push() 替换为 router.replace()
router.replace({path: '/b'})
横跨历史
// 前进,数量可变
router.go(1)
// 后退
router.back()
3. 路由传参
详情请见:vue3的路由传参query、params以及动态路由传参
4. 嵌套路由
const routes: Array<RouteRecordRaw> = [{
path: '/index',
// redirect: '/index',
name: 'Index',
component: () => import('@/views/index.vue'),
meta: {
title: '首页',
},
children: [
{
path: '', /* 为空时默认显示 */
name: 'A',
component: () => import('@/components/A.vue'),
}, {
path: 'b', /* 注意子路由不要使用 / */
name: 'B',
component: () => import('@/components/B.vue'),
}, {
path: 'c',
name: 'C',
component: () => import('@/components/C.vue'),
}]
}]
注意,以 /
开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。
<template>
<h2>父路由</h2>
<router-link to="/index">A</router-link> <!-- 需要拼接上父路由 -->
<router-link to="/index/b">B</router-link>
<router-link to="/index/c">C</router-link>
<hr class="mtb20">
<router-view></router-view>
</template>
5. 命令视图
运用场景:想同时 (同级) 展示多个视图,而不是嵌套展示
const A = () => import('@/components/A.vue')
const B = () => import('@/components/B.vue')
const C = () => import('@/components/C.vue')
const routes: Array<RouteRecordRaw> = [{
path: '/index',
name: 'Index',
component: () => import('@/views/index.vue'),
meta: {
title: '首页',
},
children: [
{
path: '',
name: 'A',
component: A,
}, {
path: 'b',
name: 'B',
// 渲染多个组件加个s component ---> components
components: {
default: B, /* 默认 router-view */
ccc: C /* <router-view name="ccc"> */
},
}, {
path: 'c',
name: 'C',
components: {
default: A,
B, /* B: B 的简写 */
C
},
}]
}]
...
<router-view></router-view> <!-- 渲染默认的 -->
<router-view name="ccc"></router-view> <!-- 渲染C组件 -->
<router-view name="B"></router-view>
<router-view name="C"></router-view>
6. 重定向和别名
6.1 重定向
const routes: Array<RouteRecordRaw> = [{
path: '/index',
component: () => import('@/views/index.vue'),
redirect: '/index/b',
children: [
{
path: 'a',
name: 'A',
component: A,
}, {
path: 'b',
name: 'B',
component: B,
}, {
path: 'c',
name: 'C',
component: C,
}]
}]
写法
// 1. 字符串
const routes = [{ path: '/index', redirect: '/index/b' }]
// 2. 对象 redirect: { name: 'B' } 或者 redirect: { path: '/index/b' }
const routes = [{ path: '/index', redirect: { name: 'B' } }]
// 3. 函数 可以传递参数
const routes = [
{
// /index-> /index/b?a=1&b=小多
path: '/index',
redirect: to => {
console.log('to :>> ', to);
return {
name: 'B',
query: {
a: 1,
b: '小多'
},
}
},
},
]
6.2 别名
// 1. 字符串
const routes = [{ path: '/', component: Homepage, alias: '/root' }]
// 2. 数组
const routes = [
{
path: '/users/:id',
component: UsersByIdLayout,
children: [
// 为这 3 个 URL 呈现 UserDetails
// - /users/24
// - /users/24/profile
// - /24
{ path: 'profile', component: UserDetails, alias: ['/:id', ''] },
],
},
]
7. 路由守卫
7.1 全局前置守卫
每个守卫方法接收两个参数:
to
: 即将要进入的目标 用一种标准化的方式from
: 当前导航正要离开的路由 用一种标准化的方式
可以返回的值如下:
false
: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。- 一个路由地址: 通过一个路由地址跳转到一个不同的地址,就像你调用
router.push()
一样,你可以设置诸如replace: true
或name: 'home'
之类的配置。当前的导航被中断,然后进行一个新的导航,就和from
一样。
router.beforeEach(async (to, from) => {
// isAuthenticated:用户是否登录
// to.name !== 'Login':避免无限重定向
if (!isAuthenticated && to.name !== 'Login') {
return { name: 'Login', replace: true }
}
})
7.2 全局后置守卫
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})
案例:加载滚动条
loadingBar组件
<template>
<div class="wraps">
<div ref="bar" class="bar"></div>
</div>
</template>
<script setup lang="ts">
const step = ref(1)
const bar = ref<HTMLElement>()
let timer = 0
const loadingStart = () => {
let dom = bar.value as HTMLElement
dom.style.display = 'block'
step.value = 1
timer = window.requestAnimationFrame(function fn() {
if (step.value < 90) {
step.value++
dom.style.width = step.value + '%'
} else {
step.value = 1
window.cancelAnimationFrame(timer)
}
})
}
const loadingEnd = () => {
let dom = bar.value as HTMLElement
setTimeout(() => {
window.requestAnimationFrame(() => {
step.value = 100
dom.style.width = step.value + '%'
})
setTimeout(() => {
dom.style.display = 'none'
}, 500)
}, 500)
}
defineExpose({
loadingStart,
loadingEnd,
})
</script>
<style lang="less" scoped>
@barColor: #4da7f5;
.wraps {
position: fixed;
top: 0;
width: 100%;
height: 2px;
.bar {
width: 0;
height: inherit;
background: @barColor;
}
}
</style>
index.ts
import { createVNode, render } from 'vue'
import LoadingBar from './index.vue'
const Vnode = createVNode(LoadingBar)
render(Vnode, document.body)
export default Vnode
main.ts
import loadingBar from '@/components/loadingBar/index'
...
// 路由前置守卫
router.beforeEach(async (to, from) => {
loadingBar.component?.exposed?.loadingStart()
})
// 路由后置守卫
router.afterEach((to, from) => {
loadingBar.component?.exposed?.loadingEnd()
})
更多路由守卫详情请见:Vue-Router 导航守卫
8. 路由元信息
通过路由记录的 meta
属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据
// 如果不使用扩展 将会是unknow 类型
declare module 'vue-router' {
interface RouteMeta {
title?: string,
transition?: string
}
}
const routes: Array<RouteRecordRaw> = [{ path: '/', component: A, meta: { title: '首页', transition: 'animate__bounce'} }]
router.beforeEach(async (to, from) => {
to.meta?.title && (document.title = to.meta.title)
...
})
9. 路由过渡动效
<router-view v-slot="{ Component, route }">
<transition :enter-active-class="`animate__animated ${route.meta.transition}`">
<component :is="Component" />
</transition>
</router-view>
10. 滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router
能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
const router = createRouter({
history: createWebHistory(),
scrollBehavior: (to, from, savePosition) => {
if (savePosition) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(savePosition)
}, 1000)
})
} else {
return { left: 0,top: 0 }
}
},
routes
})
11. 动态路由
11.1 添加路由
动态路由主要通过两个函数实现。router.addRoute()
和 router.removeRoute()
。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push()
或 router.replace()
来手动导航,才能显示该新路由。
router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 route = useRoute() (在 setup 中)
router.replace(router.currentRoute.value.fullPath)
记住,如果你需要等待新的路由显示,可以使用 await router.replace()
。
11.2 添加嵌套路由
要将嵌套路由添加到现有的路由中,可以将路由的 name
作为第一个参数传递给 router.addRoute()
,这将有效地添加路由,就像通过 children
添加的一样:
router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })
// 等效于
router.addRoute({
name: 'admin',
path: '/admin',
component: Admin,
children: [{ path: 'settings', component: AdminSettings }],
})
11.3 删除路由
- 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
- 通过调用
router.addRoute()
返回的回调:
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话
- 通过使用
router.removeRoute()
按名称删除路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')
11.4 查看现有路由
router.hasRoute()
:检查路由是否存在。router.getRoutes()
:获取一个包含所有路由记录的数组。
案例:
注意一个事项vite
在使用动态路由的时候无法使用别名 @
必须使用相对路径
import { useRouter } from 'vue-router'
const router = useRouter()
const result = [
{ name: 'A', path: '/a', component: 'A' },
{ name: 'B', path: '/b', component: 'B' },
{ name: 'C', path: '/c', component: 'C' },
]
const add = () => {
result.forEach(e => {
router.addRoute({
path: e.path,
name: e.name,
component: () => import(`./components/${e.component}.vue`)
})
})
console.log(router.getRoutes());
}