vue3 左侧菜单 路由

在 Vue 3 中，你可以使用 Vue Router 来实现左侧菜单路由。以下是一个简单的示例：

首先，你需要安装 Vue Router：

npm install vue-router

然后，在你的代码中引入 Vue Router，并创建一个路由实例：

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

const routes = [
  {
    path: '/home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue'),
  },
  // 其他路由配置...
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

接下来，在你的应用程序的入口文件中，将路由实例挂载到 Vue 实例上：

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';

const app = createApp(App);
app.use(router);
app.mount('#app');

现在，你可以在你的组件中使用 `<router-link>` 组件来创建链接，以及 `<router-view>` 组件来显示路由对应的组件。例如，在你的左侧菜单组件中可以这样使用：

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- 其他菜单链接... -->

    <router-view></router-view>
  </div>
</template>

这样，当用户点击菜单链接时，对应的组件将会被渲染到 `<router-view>` 中。

希望这个简单示例能帮助你实现 Vue 3 的左侧菜单路由功能！如有更多问题，请随时提问。