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') }