vue路由实现流程
Vue 路由实现流程
Vue 路由的核心是通过 vue-router 库实现的，以下是完整的实现流程：
1. 安装 vue-router
通过 npm 或 yarn 安装依赖：
npm install vue-router
# 或
yarn add vue-router2. 创建路由配置文件
在项目中新建 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;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');4. 在组件中使用路由
- 路由占位符：在根组件（如
App.vue）中添加<router-view>：<template> <router-view /> </template> - 导航链接：使用
<router-link>替代<a>标签：<router-link to="/">Home</router-link> <router-link to="/about">About</router-link>
5. 动态路由与参数传递
- 定义动态路由：
{ path: '/user/:id', component: User } - 获取参数：
// 在组件中 const { id } = useRoute().params;
6. 导航守卫
通过路由守卫控制权限或跳转逻辑：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn) next('/login');
else next();
});7. 懒加载路由
优化性能，按需加载组件：
const routes = [
{ path: '/', component: () => import('../views/Home.vue') }
];关键注意事项
- 路由模式：
createWebHistory需服务器支持（避免 404），或使用createWebHashHistory（带#的哈希模式）。 - 404 路由：可配置通配符路由捕获未匹配路径：
{ path: '/:pathMatch(.*)*', component: NotFound } - 命名路由：通过
name属性简化路由跳转：{ path: '/user', name: 'user', component: User }
