vue路由实现步骤
Vue 路由实现步骤
安装 Vue Router
通过 npm 或 yarn 安装 Vue Router 依赖包：
npm install vue-router
# 或
yarn add vue-router创建路由配置文件
在项目中新建一个路由配置文件（如 src/router/index.js），引入 Vue 和 Vue Router，并定义路由规则：
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;挂载路由到 Vue 实例
在 main.js 中导入路由配置并挂载到 Vue 应用：
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');添加路由视图容器
在根组件（如 App.vue）中添加 <router-view> 标签作为路由内容的渲染出口：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>导航链接的使用
在组件中使用 <router-link> 实现路由跳转，例如：
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>动态路由与参数传递
定义动态路由时，使用冒号 : 标记参数，例如：
{ path: '/user/:id', component: User }在目标组件中通过 useRoute 获取参数：
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params.id);嵌套路由配置
通过 children 属性实现嵌套路由，例如：
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}在父组件模板中添加 <router-view> 作为子路由出口。
路由守卫
使用全局或局部路由守卫控制导航逻辑，例如：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) next('/login');
else next();
});懒加载路由组件
通过动态导入优化性能，例如：
{ path: '/profile', component: () => import('../views/Profile.vue') }
