2024年4月5日发(作者：)
Vue3 Router用法
一、简介
Vue Router是官方的路由管理器。它允许我们在单页面应用程序（SPA）
中管理应用程序的路由。Vue Router为我们提供了一种简洁、灵活的方式来实现
不同路由之间的切换和导航。
二、安装
要使用Vue Router，首先需要确保已经安装了和Vue Router。可以通过以
下命令来安装Vue Router：
npm install vue-router@next
三、基本用法
1. 路由配置
在使用Vue Router之前，需要进行一些基本的路由配置。在Vue Router中，可以
通过创建一个路由配置对象来定义路由规则。
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
// 其他路由规则...
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
在路由配置中，可以定义多个路由规则，每个路由规则指定了一个路径（path）、
一个名称（name）以及对应的组件（component）。
2. 路由插座
在应用程序的根组件中，需要添加一个路由插座，用于渲染不同的路由组件。
3. 路由导航
Vue Router提供了一些导航守卫，用于在路由切换前后执行一些操作。以下是一
些常用的导航守卫：
•
•
•
•
beforeEach
：在每次路由跳转之前执行，用于进行一些全局的前置操作。
afterEach
：在每次路由跳转之后执行，用于进行一些全局的后置操作。
beforeEnter
：在路由进入之前执行，用于进行路由级别的前置操作。
beforeRouteUpdate
：在路由组件复用时执行，用于更新组件数据。
Each((to, from, next) => {
// 执行一些操作...
next();
});
ach(() => {
// 执行一些操作...
});
4. 路由传参
和传统的URL路由一样，Vue Router也支持路由传参。在路由配置中，可以通过
动态段来定义带参数的路由。
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
];
在路由组件中，可以通过
$route
对象来获取路由参数。
import { ref, watchEffect } from 'vue';
export default {
setup() {
const userId = ref(null);
watchEffect(() => {
= $;
});
return {
userId
};
}
};
四、高级用法
1. 嵌套路由
Vue Router还支持嵌套路由，使得我们可以在一个路由组件中嵌套另一个路由组
件。
const routes = [
{
path: '/user/:id',
name: 'User',
component: User,
children: [
{
path: 'profile',
name: 'UserProfile',
component: UserProfile
},
{
path: 'posts',
name: 'UserPosts',
component: UserPosts
},
// 其他嵌套路由规则...
]
}
];
在上面的例子中，当访问
/user/:id/profile
时，会同时渲染
User
和
UserProfile
组
件。
2. 路由元信息
Vue Router允许为每个路由添加自定义的元信息。这在需要根据不同的路由进行
权限控制或其他操作时非常有用。
const routes = [
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true
}
},
// 其他路由规则...
];
在上面的例子中，可以通过路由的
meta
字段来定义是否需要进行身份验证。
3. 动态路由
Vue Router还支持动态路由，可以根据不同的参数动态生成路由。
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
];
在上面的例子中，
:id
是一个动态参数，可以根据实际情况进行动态生成。
4. 编程式导航
Vue Router提供了一些方法来进行编程式导航，例如在事件处理函数或生命周期
钩子中进行路由跳转。
// 使用()进行路由跳转
('/user');
// 使用e()进行路由替换
e('/user');
// 使用()进行路由前进或后退
(-1);
五、总结
以上是Vue Router的基本用法和一些高级用法。使用Vue Router可以轻松实现单
页面应用程序的路由管理。通过合理的路由配置、路由插座和导航守卫，可以实现
灵活且高效的路由切换和导航操作。同时，Vue Router还提供了嵌套路由、路由
元信息、动态路由和编程式导航等高级特性，可以满足不同场景下的需求。希望本
文对于理解和使用Vue3 Router有所帮助。
发布评论