如何通过Vue.js CLI 3.0为已创建项目事后添加路由？

当然可以事后给你的Vue 3项目补上路由！你遇到的vue add @vue/router无效的问题，是因为正确的CLI命令不需要带@vue/前缀——不过就算CLI命令的小插曲难住了你，手动安装配置也一点不麻烦，下面给你两种靠谱的解决方案：

方法一：用Vue CLI一键添加（最省心） #

打开项目根目录的终端，直接运行这条命令：

vue add router

这条命令会自动帮你完成所有基础工作：

• 安装适配Vue 3的vue-router@4依赖包
• 生成src/router/index.js路由配置文件
• 创建示例的Home和About视图组件
• 自动修改main.js，把路由挂载到Vue应用实例上
• 在App.vue中添加路由出口<router-view>和基础导航链接

全程不需要你手动改任何配置，跑完命令就能直接用路由功能。

方法二：手动安装配置（自定义性更强） #

如果想要完全按照自己的项目结构来配置路由，可以按以下步骤操作：

1. 安装路由依赖
   在终端运行对应的包管理命令：

# npm
npm install vue-router@4

# yarn
yarn add vue-router@4

# pnpm
pnpm add vue-router@4

2. 创建路由配置文件
   在src目录下新建router文件夹，里面创建index.js文件，填入基础路由配置：

import { createRouter, createWebHistory } from 'vue-router'
// 导入你的视图组件，这里可以换成你项目里的组件
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 懒加载方式，优化页面加载速度
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  // 使用HTML5历史模式，去掉URL里的#
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. 挂载路由到Vue应用
   打开src/main.js，引入并挂载路由：

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

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

4. 添加路由出口和导航
   在App.vue的模板中，添加路由出口（用来渲染匹配的组件），如果需要导航栏的话可以加上<router-link>：

<template>
  <nav>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于我们</router-link>
  </nav>
  <!-- 路由匹配到的组件会渲染在这里 -->
  <router-view />
</template>

5. 创建对应的视图组件
   根据路由配置里的路径，创建对应的视图组件（比如src/views/HomeView.vue和AboutView.vue），或者直接复用你项目中已有的组件即可。

两种方法都能完美适配Vue 3的新架构，按需选择就好啦！

内容的提问来源于stack exchange，提问作者Jim Cooper