Vue开发之路由（vuecli路由）

Vue 路由是构建单页面应用（SPA）的核心功能，主要通过 Vue Router 实现。以下是 Vue Router 的详细讲解，涵盖核心概念、用法和最佳实践。

一、Vue Router 核心概念

1. 路由的作用

SPA 页面切换：在不刷新页面的情况下动态加载不同组件。

URL 与组件映射：通过 URL 路径匹配对应的组件。

导航守卫：控制路由跳转的权限和逻辑。

路由参数传递：通过 URL 或路由对象传递数据。

二、快速上手 Vue Router

1. 安装

npm install vue-router@4 # Vue 3 使用 vue-router 4.x

2. 基础配置

在 src/router/index.js 中创建路由实例：

import { createRouter, createWebHistory } from 'vue-router';

// 1. 定义路由组件（或异步导入）

import Home from '../views/Home.vue';

import About from '../views/About.vue';

// 2. 定义路由规则

const routes = [

{ path: '/', component: Home },

{ path: '/about', component: About },

];

// 3. 创建路由实例

const router = createRouter({

history: createWebHistory(), // 使用 HTML5 模式（去掉 URL 中的 #）

routes,

});

export default router;

3. 挂载到 Vue 应用

在 main.js 中：

import { createApp } from 'vue';

import App from './App.vue';

import router from './router';

const app = createApp(App);

app.use(router); // 启用路由

app.mount('#app');

三、核心功能详解

1. 路由跳转

声明式导航：使用 <router-link> 组件（类似 <a> 标签）

<template>

<router-link to="/">Home</router-link>

<router-link to="/about">About</router-link>

</template>

编程式导航：通过 router 实例方法

// 在组件中

import { useRouter } from 'vue-router';

export default {

setup() {

const router = useRouter();

const goToAbout = () => {

router.push('/about'); // 跳转到 about 页面

// 或 router.replace('/about') （替换当前历史记录）

};

return { goToAbout };

},

};

2. 动态路由

通过 : 定义动态路径参数：

// 路由配置

{

path: '/user/:id',

component: User,

}

在组件中获取参数：

<template>

<div>User ID: {{ $route.params.id }}</div>

</template>

<script>

import { useRoute } from 'vue-router';

export default {

setup() {

const route = useRoute();

console.log(route.params.id); // 通过 Composition API 获取

return {};

},

};

</script>

3. 嵌套路由

通过 children 属性定义子路由：

const routes = [

{

path: '/user',

component: UserLayout,

children: [

{ path: '', component: UserHome }, // /user

{ path: 'profile', component: UserProfile }, // /user/profile

],

},

];

4. 命名路由

为路由定义唯一名称，简化跳转：

// 路由配置

{ path: '/settings', name: 'Settings', component: Settings }

跳转时使用名称：

router.push({ name: 'Settings' });

5. 路由懒加载

优化首屏加载速度，按需加载组件：

const routes = [

{

path: '/admin',

component: () => import('../views/Admin.vue'), // 动态导入

},

];

四、高级特性

1. 导航守卫（路由拦截）

全局前置守卫：验证权限或登录状态

router.beforeEach((to, from, next) => {

if (to.meta.requiresAuth && !isAuthenticated) {

next('/login'); // 重定向到登录页

} else {

next(); // 放行

}

});

路由独享守卫

{

path: '/admin',

component: Admin,

beforeEnter: (to, from, next) => { /* 逻辑 */ }

}

组件内守卫

export default {

beforeRouteEnter(to, from, next) { /* 进入前 */ },

beforeRouteUpdate(to, from, next) { /* 路由参数变化时 */ },

beforeRouteLeave(to, from, next) { /* 离开前 */ },

};

2. 路由元信息（Meta Fields）

附加自定义数据到路由：

{

path: '/dashboard',

component: Dashboard,

meta: { requiresAuth: true, title: '控制台' }

}

3. 路由过渡动画

通过 <transition> 组件实现页面切换动画：

<router-view v-slot="{ Component }">

<transition name="fade" mode="out-in">

<component :is="Component" />

</transition>

</router-view>

4. 滚动行为控制

定义路由跳转后的滚动位置：

const router = createRouter({

history: createWebHistory(),

routes,

scrollBehavior(to, from, savedPosition) {

if (savedPosition) {

return savedPosition; // 返回历史记录中的位置

} else {

return { top: 0 }; // 滚动到顶部

}

},

});

五、Vue Router 与 Vue 3 的配合

1. Composition API 支持

在 setup() 中使用路由：

import { useRoute, useRouter } from 'vue-router';

export default {

setup() {

const route = useRoute(); // 当前路由信息（类似 this.$route）

const router = useRouter(); // 路由实例（类似 this.$router）

return { route, router };

},

};

2. TypeScript 支持

Vue Router 4 提供完整的类型定义：

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [

{ path: '/', component: Home },

];

六、常见问题与解决方案

七、最佳实践

路由分层：将路由配置拆分为多个模块（如 authRoutes、adminRoutes）。

权限控制：结合全局守卫和路由元信息实现动态权限管理。

代码分割：对大型路由使用懒加载，提升首屏性能。

统一错误页：配置 404 页面捕获未匹配的路由：

{ path: '/:pathMatch(.*)*', component: NotFound }

八、学习资源

官方文档：[Vue Router 4 官方指南](
https://router.vuejs.org/zh/)

实战项目：尝试构建一个包含登录、权限管理和动态路由的 Admin 系统

调试工具：使用 [Vue Devtools](
https://devtools.vuejs.org/) 查看路由状态

通过以上内容，你可以系统掌握 Vue Router 的核心功能，并能够应对大多数单页面应用的路由场景！