当前位置：首页 > VUE

vue路由实现流程

2026-02-17 21:33:51VUE

Vue 路由实现流程

Vue 路由的核心是通过 vue-router 库实现的，以下是完整的实现流程：

1. 安装 vue-router
通过 npm 或 yarn 安装依赖：

npm install vue-router
# 或
yarn add vue-router

2. 创建路由配置文件
在项目中新建 router/index.js 文件，配置路由规则：

vue路由实现流程

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. 在组件中使用路由

vue路由实现流程

路由占位符：在根组件（如 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 }
```