Vue3是一个功能强大且灵活的前端框架，提供了优秀的开发体验。而vue-router作为Vue的官方路由管理器，是构建单页面应用程序（SPA）的关键工具。本文将详细介绍vue-router在Vue3中的使用，并通过多个例子展示其在各种情况下的应用技巧，涵盖权限管理、懒加载、嵌套路由等。所有示例都将使用Vue3的setup语法糖进行书写。
一、安装vue-router
在Vue3项目中安装vue-router非常简单，只需运行以下命令：
npm install vue-router二、基本使用
1. 创建路由配置文件
首先，我们需要创建一个路由配置文件src/router/index.js，并在其中定义我们的路由。
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;2. 在主入口文件中使用路由
在src/main.js中导入并使用路由。
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');3. 创建组件
我们需要创建一些简单的组件来展示路由是如何工作的。例如Home.vue和About.vue。
<!-- Home.vue -->
<template>
<div>
<h1>Home Page</h1>
<p>Welcome to the Home page!</p>
</div>
</template>
<script setup>
</script><!-- About.vue -->
<template>
<div>
<h1>About Page</h1>
<p>This is the About page.</p>
</div>
</template>
<script setup>
</script>三、动态路由匹配
动态路由匹配允许我们在URL中使用变量，这对于创建用户个人页面等功能非常有用。
1. 定义动态路由
在路由配置文件中，我们可以这样定义一个动态路由：
const routes = [
// 其他路由
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue')
}
];2. 创建动态路由组件
创建User.vue，并使用setup语法糖获取路由参数：
<template>
<div>
<h1>User Page</h1>
<p>User ID: {{ userId }}</p>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const userId = route.params.id;
</script>四、嵌套路由
嵌套路由用于在一个视图中展示多个子视图。
1. 定义嵌套路由
在路由配置文件中，我们可以这样定义嵌套路由：
const routes = [
{
path: '/parent',
component: () => import('../views/Parent.vue'),
children: [
{
path: 'child',
component: () => import('../views/Child.vue')
}
]
}
];2. 创建父组件和子组件
创建Parent.vue和Child.vue。
<!-- Parent.vue -->
<template>
<div>
<h1>Parent Page</h1>
<router-view></router-view>
</div>
</template>
<script setup>
</script><!-- Child.vue -->
<template>
<div>
<h1>Child Page</h1>
<p>This is a child route.</p>
</div>
</template>
<script setup>
</script>五、导航守卫
导航守卫用于在路由进入或离开时执行某些逻辑，例如权限验证。
1. 全局导航守卫
在路由配置文件中，我们可以添加全局导航守卫：
router.beforeEach((to, from, next) => {
if ( !== 'Login' && !isAuthenticated) {
next({ name: 'Login' });
} else {
next();
}
});2. 路由独享守卫
在路由定义中，我们可以添加路由独享守卫：
const routes = [
{
path: '/admin',
component: () => import('../views/Admin.vue'),
beforeEnter: (to, from, next) => {
if (!isAdmin) {
next({ name: 'Home' });
} else {
next();
}
}
}
];3. 组件内守卫
在组件中，我们可以添加组件内守卫：
<script setup>
import { onBeforeRouteLeave } from 'vue-router';
onBeforeRouteLeave((to, from, next) => {
if (hasUnsavedChanges) {
const answer = window.confirm('You have unsaved changes. Do you really want to leave?');
if (answer) {
next();
} else {
next(false);
}
} else {
next();
}
});
</script>六、路由懒加载
为了优化性能，我们可以使用路由懒加载。Vue3的defineAsyncComponent使这一过程更加方便。
import { defineAsyncComponent } from 'vue';
const routes = [
{
path: '/lazy',
component: defineAsyncComponent(() =>
import('../views/LazyLoadedComponent.vue')
)
}
];七、滚动行为
我们可以通过配置滚动行为来控制页面在导航时的滚动位置。
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
}
});八、路由元信息及权限管理
路由元信息（meta信息）允许我们为路由添加额外的字段，这在权限管理等场景中非常有用。
1. 定义带有元信息的路由
const routes = [
{
path: '/dashboard',
component: () => import('../views/Dashboard.vue'),
meta: { requiresAuth: true }
},
{
path: '/login',
component: () => import('../views/Login.vue')
}
];2. 使用导航守卫进行权限验证
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next({ path: '/login' });
} else {
next();
}
});3. 创建权限验证组件
<!-- Dashboard.vue -->
<template>
<div>
<h1>Dashboard</h1>
<p>Welcome to the dashboard!</p>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
// 假设有一个方法来验证用户是否已登录
if (!isAuthenticated) {
router.push('/login');
}
</script>九、导航守卫中的异步操作
在某些情况下，导航守卫可能需要进行异步操作，例如请求服务器以验证权限。这时，我们可以使用async和await来处理异步逻辑。
router.beforeEach(async (to, from, next) => {
if (to.meta.requiresAuth) {
const isAuthenticated = await checkAuth();
if (isAuthenticated) {
next();
} else {
next('/login');
}
} else {
next();
}
});总结
通过本文，我们详细介绍了vue-router在Vue3中的使用方法，包括基本使用、动态路由、嵌套路由、导航守卫、路由懒加载、滚动行为、路由元信息及权限管理、导航守卫中的异步操作、利用路由实现面包屑导航以及路由过渡动画。希望这些示例和技巧能帮助你更好地掌握vue-router，在实际项目中得心应手地使用它。Happy coding!
