文章目录
1. 基于 Vue Router 的单页应用（SPA）开发
在使用Vue Router开发应用时，我们通常会采用以下步骤：
- 安装和配置 Vue Route：包括创建路由实例、定义路由和组件等。
- 在组件中使用路由：包括使用
router-link组件进行导航、使用$router和$route对象访问路由信息等。 - 使用路由导航守卫来控制路由行为：包括全局前置守卫、全局后置守卫、路由独享守卫和组件内部守卫等。
- 使用路由重定向来管理路由：包括使用
redirect属性和命名路由等。 - 使用动态路由来使路由更加灵活：包括使用路由参数和查询参数等。
2. Vue Router 的懒加载和路由缓存
2.1. 路由懒加载
当我们的应用程序包含大量的组件和路由时，可能会造成初始加载时间过长，影响用户体验。为了优化这个问题，Vue Router提供了一种叫做“路由懒加载”的功能，可以将路由的组件按需加载，而不是一开始就全部加载。
路由懒加载可以通过两种方式来实现：
2.1.1. AMD (异步模块定义) 方式
const Foo = resolve => require(['./Foo.vue'], resolve)
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})
2.1.2. ES6 import() 模块方式
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})
需要注意的是，路由懒加载需要配合Webpack使用，Webpack会自动将路由组件打包成异步代码块，实现按需加载。如果您使用其他构建工具或不使用构建工具，则需要手动实现路由懒加载的功能。
2.2. 路由缓存
在某些场景下，我们希望在路由切换时保留之前的路由状态，例如在 Tab 页之间切换时，保留之前打开的 Tab 页。为了实现这个功能，Vue Router提供了一种叫做“路由缓存”的功能，可以将路由的状态缓存起来，而不是每次都重新渲染。
路由缓存可以通过以下步骤来实现：
- 在需要缓存的路由组件上添加
keep-alive组件。
<template>
<div>
<h1>Home</h1>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="route?.meta?.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!route?.meta?.keepAlive" />
</router-view>
</div>
</template>
- 在路由配置中添加
meta属性，用来标识该路由是否需要缓存。
const routes = [
{
path: '/',
component: Home,
children: [
{
path: '',
component: Dashboard,
meta: {
keepAlive: true } // 需要缓存
},
{
path: 'news',
component: News,
meta: {
keepAlive: false } // 不需要缓存
}
]
}
]
- 在路由组件中使用
onActivated和onDeactivated钩子函数来保存和恢复组件状态。
<script setup lang="ts">
import {
onActivated, onDeactivated } from "vue";
onActivated(() => {
// 调用时机为首次挂载
// 以及每次从缓存中被重新插入时
});
onDeactivated(() => {
// 在从 DOM 上移除、进入缓存
// 以及组件卸载时调用
});
</script>
需要注意的是，路由缓存会占用一定的内存空间，如果您的应用程序包含大量的缓存路由，则可能会导致内存占用过高。因此，在使用路由缓存时，需要根据实际情况进行权衡和优化。
3. Vue Router 的权限控制和错误处理
在单页面应用程序中，由于所有的路由都是在前端进行处理的，因此我们需要在客户端进行权限控制和错误处理。Vue Router 提供了一些便捷的功能，可以帮助我们实现这些功能。以下是一些常见的权限控制和错误处理方法：
3.1. 路由元信息
路由元信息可以用来存储一些与路由相关的元数据，例如权限、标题、面包屑等信息。我们可以在路由配置中使用 meta 属性来定义路由元信息。以下是一个示例：
const router = new VueRouter({
routes: [
{
path: '/dashboard',
component: Dashboard,
meta: {
requiresAuth: true,
title: 'Dashboard',
breadcrumb: [
{
text: 'Home', to: '/' },
{
text: 'Dashboard', to: '/dashboard' }
]
}
}
]
})
在上面的示例中，我们定义了一个 Dashboard 路由，并在 meta 属性中存储了一些元信息。其中，requiresAuth 表示该路由需要进行身份验证，title 表示该路由的标题，breadcrumb 表示该路由的面包屑导航。
我们可以在路由组件中通过 route.meta.title 来访问路由元信息。例如，我们可以使用以下代码来访问 Dashboard 路由的标题：
<script setup lang="ts">
import {
onMounted } from "vue";
import {
useRoute } from "vue-router";
const route = useRoute();
onMounted(() => {
document.title = route.meta.title as string; // 修改网站标题
});
</script>
路由元信息可以帮助我们实现一些基本的权限控制和错误处理功能。例如，我们可以使用 requiresAuth 属性来控制登录用户才能访问某些路由：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth) && !auth.isAuthenticated()) {
next('/login')
} else {
next()
}
})
在上面的示例中，我们使用 beforeEach 路由守卫来检查用户是否已登录。如果用户未登录且访问了需要登录才能访问的路由，则自动跳转到登录页。
3.2. 动态路由
动态路由可以根据不同的参数生成不同的路由。我们可以在路由配置中使用 : 符号来定义动态路由参数。例如，以下是一个动态路由的示例：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
meta: {
requiresAuth: true
}
}
]
})
在上面的示例中，我们定义了一个 User 路由，并使用 :id 参数来定义动态路由。这意味着，当用户访问 /user/123 时，将会自动匹配到 User 路由，并将 123 参数传递给路由组件。
动态路由可以帮助我们实现一些更加复杂的权限控制和错误处理功能。例如，我们可以使用动态路由来限制用户只能访问自己的数据：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
meta: {
requiresAuth: true
},
beforeEnter: (to, from, next) => {
if (to.params.id !== auth.currentUser.id) {
next('/403')
} else {
next()
}
}
}
]
})
在上面的示例中，我们使用 beforeEnter 路由守卫来检查用户是否有权限访问该路由。如果用户尝试访问其他用户的数据，则会被重定向到 403 页面。
如果您想了解更多关于 Vue Router 的相关内容，请参考 Vue Router 官方文档。