从零配置 Vue Router 并挂载到主应用需四步：安装对应版本插件、定义 routes 数组、创建路由实例、在主入口通过 router 选项（Vue 2）或 app.use()（Vue 3）注入，最后在 App.vue 中添加 router-link 和 router-view。

从零配置 Vue Router 并挂载到主应用，核心就四步：安装插件、定义路由规则、创建路由实例、注入 Vue 根实例。Vue 2 和 Vue 3 的写法略有差异，但逻辑一致——把“路径”和“组件”连起来，再让整个 App 知道这件事。

安装对应版本的 vue-router

先确认你用的是 Vue 2 还是 Vue 3：

• Vue 2 项目 → 安装 vue-router@3.x（如 npm install vue-router@3.6.5）
• Vue 3 项目 → 安装 vue-router@4.x（如 npm install vue-router@4）

装错版本会报错，比如 createRouter is not defined 或 VueRouter is not a constructor，务必核对 package.json 中的 Vue 版本。

定义路由映射表（routes 数组）

在 src/router/index.js（Vue 2）或 src/router/index.ts（Vue 3）中编写：

立即学习“前端免费学习笔记（深入）”；

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• Vue 2 示例：

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Home from '@/views/Home.vue'
  import About from '@/views/About.vue'
  
  Vue.use(VueRouter)
  
  const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About }
  ]
  
  export default new VueRouter({ routes })

• Vue 3 示例：

  import { createRouter, createWebHistory } from 'vue-router'
  import Home from '@/views/Home.vue'
  import About from '@/views/About.vue'
  
  const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About }
  ]
  
  const router = createRouter({
    history: createWebHistory(),
    routes
  })
  
  export default router

注意：name 字段建议始终填写，方便编程式导航（如 router.push({ name: 'Home' })）和命名视图。

在主入口文件中挂载路由实例

修改 src/main.js（Vue 2）或 src/main.ts（Vue 3）：

• Vue 2：把 router 作为选项传入 Vue 实例

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  
  new Vue({
    router, // 关键：注入路由
    render: h => h(App)
  }).$mount('#app')

• Vue 3（Composition API）：用 app.use() 注册

  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-link to="/about">关于</router-link> —— 声明式导航，生成带 href 的 a 标签
• <router-view></router-view> —— 路由匹配的组件将在此处渲染

例如：

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

没有 <router-view></router-view>，组件就无处可渲染；没有 <router-link></router-link> 或 this.$router.push()，用户就无法触发跳转。