Vue Router 是 Vue.js 官方的路由管理器,专门用于 Vue.js 应用中的路由功能。在 Vue 3 中,Vue Router 进行了许多改进,使得路由管理更加灵活和高效。本文将详细介绍 Vue 3 路由的基本概念、核心特性以及如何在实际项目中使用它。
什么是 Vue Router?
Vue Router 允许开发者在单页面应用(SPA)中管理不同的视图。通过路由,开发者可以根据不同的 URL 显示不同的组件。Vue Router 提供了丰富的功能,包括动态路由、嵌套路由、路由守卫等,能够满足复杂应用的需求。
安装 Vue Router
在使用 Vue 3 创建项目时,可以通过 npm 或 yarn 安装 Vue Router:
npm install vue-router
或者
yarn add vue-router
创建基本路由
首先,需要创建一个路由实例并配置路由规则。以下是一个简单的示例:
// router/index.ts
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(),
routes
});
export default router;
在上面的代码中,我们定义了两个路由:Home
和 About
,并指定了对应的组件。createWebHistory
方法用于创建一个 HTML5 History 模式的路由历史管理器。
在 Vue 应用中使用路由
在 Vue 应用中使用路由非常简单。你只需在主文件中引入路由实例并将其挂载到 Vue 应用上:
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
路由视图
在组件中显示路由内容,可以使用 <router-view>
组件。它会根据当前路由的路径渲染相应的组件。
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view />
</div>
</template>
<router-link>
组件用于创建路由链接,to
属性指定链接的目标路径。
动态路由
动态路由允许在路径中使用参数。比如,我们可以定义一个用户信息页面,路径中包含用户 ID:
{
path: '/user/:id',
name: 'User',
component: User
}
在组件中,可以通过 this.$route.params.id
访问动态参数:
<script>
export default {
mounted() {
const userId = this.$route.params.id;
console.log(`User ID: ${userId}`);
}
}
</script>
嵌套路由
Vue Router 支持嵌套路由,可以创建复杂的视图结构。例如,我们可以在 User
组件中嵌套更多的子路由:
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'posts',
component: UserPosts
},
{
path: 'info',
component: UserInfo
}
]
}
];
在 User
组件中,可以使用 <router-view>
来显示嵌套的子路由组件。
路由守卫
路由守卫允许我们在路由变化前或后执行某些操作,常用于权限控制和数据预加载。Vue Router 提供了全局守卫、路由独享守卫和组件内守卫。
全局守卫示例
router.beforeEach((to, from, next) => {
const isAuthenticated = /* ... */;
if (to.meta.requiresAuth && !isAuthenticated) {
next({ name: 'Login' });
} else {
next();
}
});
在这个例子中,我们检查目标路由是否需要认证,如果需要且用户未登录,则重定向到登录页面。
路由懒加载
为了优化应用性能,可以使用路由懒加载。通过动态导入组件,可以在用户访问相应路由时才加载对应的组件。
const routes = [
{
path: '/about',
component: () => import('../views/About.vue')
}
];