Vue Router学习及使用

一、什么是 Vue Router？

Vue Router 是 Vue.js 官方的路由管理器。在单页应用（SPA）中，它负责管理 URL 与组件之间的映射关系------当用户访问不同 URL 时，动态渲染对应的 Vue 组件，实现页面间的无刷新切换。

简单来说，Vue Router 的核心能力包括：

路由映射：将 URL 路径与 Vue 组件一一对应
动态路由 ：支持带参数的路由（如 /user/:id）
嵌套路由：在组件内部定义子路由
导航守卫：在路由跳转前后执行权限验证等逻辑
编程式导航：通过 JavaScript 代码控制页面跳转

二、版本对应关系

这是最重要的一点：Vue 版本必须与 Vue Router 版本匹配！

Vue 版本	Vue Router 版本
Vue 2	vue-router@3.x
Vue 3	vue-router@4.x

vue-router@4.x 专为 Vue 3 设计，不兼容 Vue 2。如果搞混版本，项目将无法运行。

三、Vue 3 + Vue Router 4 使用教程

1. 安装

bash 复制代码

npm install vue-router@4
# 或
yarn add vue-router@4
# 或
pnpm add vue-router@4

2. 创建路由配置文件

在 src/router/index.js 中创建路由配置：

javascript 复制代码

// src/router/index.js
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: () => import('../views/About.vue')
  },
  // 404 匹配
  {
    path: '/:pathMatch(.*)*',
    component: () => import('../views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

Vue 3 的关键变化 ：不再使用 new VueRouter()，改用 createRouter() 工厂函数；路由模式从 mode: 'history' 改为 history: createWebHistory()。

3. 在 main.js 中挂载路由

javascript 复制代码

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

4. 在模板中使用

vue 复制代码

<!-- App.vue -->
<template>
  <div>
    <!-- 导航链接 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    
    <!-- 路由出口：匹配的组件在此渲染 -->
    <router-view></router-view>
  </div>
</template>

5. 编程式导航（组合式 API）

Vue 3 中不再有 this ，需要使用 useRouter 和 useRoute 这两个组合式 API：

vue 复制代码

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()  // 路由操作器，对应 Vue2 的 this.$router
const route = useRoute()    // 路由读取器，对应 Vue2 的 this.$route

// 字符串路径跳转
const goToAbout = () => {
  router.push('/about')
}

// 命名路由跳转（推荐）
const goToHome = () => {
  router.push({ name: 'Home' })
}

// 替换当前路由（不产生历史记录）
const replaceHome = () => {
  router.replace('/')
}

// 前进/后退
const goBack = () => {
  router.go(-1)
}
</script>

6. 路由传参

Vue 3 中通过 useRoute() 获取参数：

Query 参数（地址栏可见）

javascript 复制代码

// 跳转
router.push({ path: '/about', query: { id: 1, name: 'test' } })

// 接收
const route = useRoute()
console.log(route.query.id)   // 1

Params 参数（地址栏不可见）

javascript 复制代码

// 跳转（必须用 name，不能和 path 混用）
router.push({ name: 'About', params: { userId: 10086 } })

// 接收
console.log(route.params.userId)  // 10086

动态路由参数

javascript 复制代码

// 路由配置
{ path: '/user/:id', component: () => import('../views/User.vue') }

// 接收
console.log(route.params.id)

7. 嵌套路由

javascript 复制代码

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: 'profile',      // 实际路径：/user/profile
        component: UserProfile
      },
      {
        path: 'settings',     // 实际路径：/user/settings
        component: UserSettings
      }
    ]
  }
]

8. 导航守卫

javascript 复制代码

// 全局前置守卫 - 权限验证
router.beforeEach((to, from) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    return { name: 'Login' }
  }
})

// 路由独享守卫
const routes = [
  {
    path: '/admin',
    component: Admin,
    beforeEnter: (to, from) => {
      // 仅进入该路由时触发
    }
  }
]

四、Vue 2 + Vue Router 3 使用教程

1. 安装

bash 复制代码

npm install vue-router@3
# 或指定具体版本
npm install vue-router@3.5.3

2. 创建路由配置文件

在 src/router/index.js 中创建路由配置：

javascript 复制代码

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

// 必须使用 Vue.use() 注册插件
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 路由懒加载
    component: () => import('../views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue'),
    props: true  // 将路由参数自动作为 props 传入组件
  },
  {
    path: '*',   // 404 重定向
    redirect: '/'
  }
]

const router = new VueRouter({
  mode: 'history',  // 使用 history 模式，去掉 URL 中的 # 号
  routes
})

export default router

3. 在 main.js 中挂载路由

javascript 复制代码

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,  // 将路由实例注入根实例
  render: h => h(App)
}).$mount('#app')

4. 在模板中使用

vue 复制代码

<!-- App.vue -->
<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="{ name: 'User', params: { id: 123 } }">用户</router-link>
    
    <router-view></router-view>
  </div>
</template>

5. 编程式导航

Vue 2 中通过 this.$router 和 this.$route 操作路由：

vue 复制代码

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    },
    goToUser() {
      this.$router.push({ name: 'User', params: { id: 123 } })
    },
    goBack() {
      this.$router.go(-1)
    }
  },
  mounted() {
    // 获取当前路由参数
    console.log(this.$route.params.id)
    console.log(this.$route.query)
  }
}
</script>

6. 导航守卫

javascript 复制代码

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.name !== 'Login' && !isAuthenticated) {
    next({ name: 'Login' })
  } else {
    next()
  }
})

注意：Vue Router 3 的守卫需要调用 next() 函数来 resolve 钩子，而 Vue Router 4 可以返回一个路由对象来重定向，不需要 next。

五、Vue 2 vs Vue 3 核心差异对比

对比项	Vue 2 + Router 3	Vue 3 + Router 4
安装命令	`npm install vue-router@3`	`npm install vue-router@4`
创建方式	`new VueRouter({ ... })`	`createRouter({ ... })`
注册插件	`Vue.use(VueRouter)`	无需显式注册
路由模式	`mode: 'history'`	`history: createWebHistory()`
访问路由	`this.$router` / `this.$route`	`useRouter()` / `useRoute()`
守卫写法	`next()` 回调	返回路由对象或布尔值
404 匹配	`path: '*'`	`path: '/:pathMatch(.)'`
标签自定义	`tag` 属性	`custom` + 插槽

六、常见问题与注意事项

版本必须匹配 ：Vue 2 项目用 vue-router@3，Vue 3 项目用 vue-router@4，混用会报错。
params 不能与 path 混用 ：在 Vue Router 4 中，params 必须搭配 name 使用，不能和 path 一起用。
不存在的路由：Vue 2 中跳转不存在的命名路由会自动跳转到根路由，Vue 3 会直接报错。
路由懒加载 ：推荐使用 () => import('./Component.vue') 方式，可以优化首屏加载速度。
组合式 API 注意事项 ：useRouter() 和 useRoute() 只能在 setup() 或 <script setup> 中使用。

七、总结

Vue Router 是 Vue 生态中不可或缺的核心库。Vue 3 搭配 Vue Router 4 后，API 更加函数式、更贴合组合式 API 的设计理念。虽然 Vue 2 和 Vue 3 在路由配置上有较大差异，但核心概念------路由映射、导航、传参、守卫------是一脉相承的。掌握好版本对应关系，就能在两个版本之间自如切换。