vue3路由部署（空项目）

1.安装router

npm install vue-router@next

2.新建router文件，并粘贴下边代码：引入vue和router

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue'; // 替换为你的路由组件路径

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    // 添加其他路由配置
  ]
});

export default router;

3.新建路由组件文件（src/view）如Home.vue

4.在App.vue中使用路由：

<template>
    <div id="app">
        <!-- 导航到不同的路由 -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <!-- 渲染路由对应的组件 -->
        <router-view></router-view>
    </div>
</template>

5.在main.js中引入并挂载路由

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

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