Vue Router 是 Vue.js 的官方路由库，用于在 Vue 应用中实现单页面应用（SPA）的客户端路由。它使得 Vue 应用能够在不重新加载页面的情况下实现不同的视图和状态切换。以下是 Vue Router 的详细介绍，包括基本概念、配置、路由导航以及高级用法。
1 基本概念
路由 (Route): 路由是 URL 与 Vue 组件之间的映射关系。每个路由配置关联一个视图组件。
路由表 (Router Table): 路由表是一个数组，定义了路由的配置。每个路由配置项包括路径、组件及其他参数。
路由实例 (Router Instance): 一个 Vue Router 实例，负责管理路由配置、导航和路由状态。
路由视图 (Router View): 一个 Vue 组件，作为路由组件的容器，渲染与当前路由匹配的组件。
- - 安装
首先，安装 Vue Router：
npm install vue-router
- 配置和使用
创建路由实例
创建一个 router/index.js 文件，定义路由配置并创建路由实例：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
- 在 Vue 应用中使用路由
在 main.js 文件中导入路由实例，并将其传递给 Vue 应用：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
- 使用路由视图
在应用的主组件 App.vue 中，使用 组件来显示当前路由匹配的组件：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
2 路由导航
- 编程式导航
使用 Vue Router 提供的 router 实例进行编程式导航：
// 在组件中
this.$router.push('/about');
// 或
this.$router.replace('/home');
还可以使用 router 实例的 push 和 replace 方法：
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
function navigateToAbout() {
router.push('/about');
}
return { navigateToAbout };
}
}
- 声明式导航
使用 组件实现声明式导航：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</template>
3 路由守卫
路由守卫是 Vue Router 提供的一种功能，允许开发者在路由的进入、离开和变化过程中进行控制和处理。通过使用路由守卫，可以在用户导航到不同的路由时执行特定的操作，例如验证用户权限、处理数据加载等。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫三种类型的守卫。
1. 全局守卫
全局守卫是在路由实例上定义的，适用于所有的路由。它们在路由变化时被调用。
- beforeEach: 在路由导航开始之前调用，可以用于处理路由访问权限等操作。
router.beforeEach((to, from, next) => {
console.log('Global beforeEach');
// 判断是否需要登录
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login'); // 没有权限，重定向到登录页
} else {
next(); // 允许导航
}
});
- afterEach: 在路由导航结束之后调用，可以用于执行一些不影响导航的操作，例如记录日志。
router.afterEach((to, from) => {
console.log('Global afterEach');
// 可用于执行一些操作，例如更新页面标题
document.title = to.meta.title || 'Default Title';
});
- beforeResolve: 在路由解析完且所有组件内守卫和异步路由组件都已解析之后调用。适合进行需要在导航完成前进行的操作。
router.beforeResolve((to, from, next) => {
console.log('Global beforeResolve');
next();
});
2. 路由独享守卫
路由独享守卫是配置在特定路由中的，只有在匹配到该路由时才会触发。
- beforeEnter: 在路由进入之前调用，与全局 beforeEach 类似，但仅针对特定路由。
const routes = [
{
path: '/profile',
component: Profile,
beforeEnter: (to, from, next) => {
console.log('Route beforeEnter');
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
}
}
];
3. 组件内守卫
组件内守卫是定义在 Vue 组件内部的，专用于该组件的路由守卫。
- beforeRouteEnter: 在路由进入之前调用，此时组件实例尚未被创建。通过 next 函数获取组件实例。
export default {
name: 'Profile',
beforeRouteEnter(to, from, next) {
console.log('Component beforeRouteEnter');
// 可以获取到组件实例
next(vm => {
console.log('Component instance:', vm);
});
}
}
- beforeRouteUpdate: 当路由在同一个组件中变化时调用（例如在动态路由中），用于处理更新。
export default {
name: 'Profile',
beforeRouteUpdate(to, from, next) {
console.log('Component beforeRouteUpdate');
// 处理路由更新逻辑
next();
}
}
- beforeRouteLeave: 当离开当前路由时调用，用于处理离开前的操作，例如确认对话框。
export default {
name: 'Profile',
beforeRouteLeave(to, from, next) {
console.log('Component beforeRouteLeave');
// 确认离开操作
if (confirm('Do you really want to leave?')) {
next();
} else {
next(false); // 取消导航
}
}
}
4 动态路由和嵌套路由
- 动态路由匹配
使用 : 来定义动态参数：
const routes = [
{ path: '/user/:id', component: User }
];
在组件中通过 this.$route.params 访问动态参数：
javascript
export default {
computed: {
userId() {
return this.$route.params.id;
}
}
}
- 嵌套路由
在路由配置中定义嵌套路径：
const routes = [
{
path: '/profile',
component: Profile,
children: [
{ path: 'settings', component: ProfileSettings }
]
}
];
在 Profile 组件中使用 显示子路由组件：
<template>
<div>
<h2>Profile</h2>
<router-view></router-view>
</div>
</template>
5 路由重定向和别名
- 重定向
路由重定向用于将访问某一路径的请求自动转发到另一路径。这对于简化 URL 或引导用户到正确的页面非常有用。
示例
假设你希望将根路径 (/) 重定向到 /home：
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home
}
];
当用户访问根路径时，他们会被自动重定向到 /home。
- 别名
路由别名允许你为一个路由配置多个路径。使用别名可以提供不同的 URL 路径来访问相同的页面。
示例
假设你有一个 UserProfile 组件，且希望通过两个不同的路径访问它：
const routes = [
{
path: '/user/:id',
component: UserProfile,
alias: '/profile/:id' // 使用别名
}
];
在这个示例中，访问 /user/123 和 /profile/123 都会渲染 UserProfile 组件。
6 路由元信息
路由元信息是用来存储与路由相关的自定义数据或信息的一个功能。这些信息不会直接影响路由的匹配，但可以用来在组件中进行条件渲染、权限控制等操作。
如何使用路由元信息
1. 定义元信息
在定义路由时，可以通过 meta 属性来添加元信息。例如：
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true, title: 'Admin Page' }
},
{
path: '/public',
component: Public,
meta: { title: 'Public Page' }
}
];
2. 访问元信息
在组件中，可以通过 this.$route.meta 访问这些元信息。例如：
export default {
name: 'MyComponent',
computed: {
pageTitle() {
return this.$route.meta.title || 'Default Title';
}
}
};
3. 使用元信息进行路由守卫
可以在全局守卫、路由守卫中使用元信息来控制访问权限或进行其他操作。例如：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login');
} else {
next();
}
});
7 路由懒加载
路由懒加载是一种优化策略，用于减少初始加载时间和提高应用性能。通过将路由组件按需加载，而不是一次性加载所有组件，可以加快应用的响应速度和启动时间。
- 使用动态导入
使用 import() 函数来实现动态导入组件。在 Vue Router 中，可以将路由组件设置为懒加载的形式：
{
name: 'information',
path: '/information',
component: () => import('@/view/app/information/Main')
},
路由懒加载的好处
- 减少初始加载时间：只有在用户访问特定路由时，相关的组件才会被加载。
- 提高应用性能：减轻主线程负担，提升用户体验。
- 按需加载：根据用户的导航行为加载所需的组件，优化资源使用。
结论
Vue Router 提供了丰富的功能来管理 Vue 应用中的路由。通过灵活配置路由、使用导航守卫、动态路由以及嵌套路由等功能，可以创建功能强大且用户体验良好的单页面应用。