Vue Router 怎么从零开始配置并挂载到主应用-Vue.js-PHP中文网

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

vue router 怎么从零开始配置并挂载到主应用

从零配置 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）中编写：

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' })）和命名视图。

Springboot Vue Builder

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

下载

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

修改 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 包含两个基础元素：

关于 —— 声明式导航，生成带 href 的 a 标签
—— 路由匹配的组件将在此处渲染

例如：

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

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