Vue Router安装配置

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。它允许开发者通过不同的 URL 访问不同的组件，从而实现页面间的无刷新跳转。本教程将详细介绍 Vue Router 的安装与配置方法，适合初学者和进阶开发者。

介绍

Vue Router 的核心功能是：

• 将 URL 映射到对应的 Vue 组件
• 提供声明式导航（如 `<router-link>`）和编程式导航（如 `router.push()`）
• 支持嵌套路由、动态路由匹配和路由守卫等高级功能

安装

通过 npm 或 yarn 安装

在已有 Vue.js 项目中，通过以下命令安装 Vue Router：

# 使用 npm
npm install vue-router@4

# 使用 yarn
yarn add vue-router@4

通过 CDN 引入

对于不使用构建工具的项目，可以通过 CDN 引入：

<script src="https://unpkg.com/vue-router@4"></script>

基础配置

以下是 Vue Router 的基本配置步骤：

1. 创建路由实例 2. 定义路由配置 3. 将路由挂载到 Vue 应用

完整配置示例

// 1. 引入必要依赖
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

// 2. 引入路由组件
import Home from './views/Home.vue'
import About from './views/About.vue'

// 3. 定义路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 4. 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 5. 创建并挂载根实例
const app = createApp({})
app.use(router)
app.mount('#app')

路由模式

Vue Router 支持两种历史记录模式：

模式	说明	适用场景
createWebHistory	使用 HTML5 History API	需要干净的 URL 且服务器已配置
createWebHashHistory	使用 URL hash	无需服务器配置，兼容性好

模式选择示例

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// HTML5 模式 (推荐)
const router = createRouter({
  history: createWebHistory(),
  routes
})

// Hash 模式
const routerHash = createRouter({
  history: createWebHashHistory(),
  routes
})

路由视图

路由配置完成后，需要在组件中使用 `<router-view>` 作为路由出口：

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

实际应用案例

电商网站路由配置

假设我们正在构建一个电商网站，需要以下路由：

graph TD A[首页 /] --> B[商品列表 /products] B --> C[商品详情 /products/:id] A --> D[用户中心 /user] D --> E[订单 /user/orders] D --> F[地址 /user/addresses]

对应路由配置：

const routes = [
  { path: '/', component: Home },
  { path: '/products', component: ProductList },
  { path: '/products/:id', component: ProductDetail },
  { 
    path: '/user', 
    component: UserCenter,
    children: [
      { path: 'orders', component: UserOrders },
      { path: 'addresses', component: UserAddresses }
    ]
  }
]

常见问题

路由不生效

可能原因： 1. 未正确调用 app.use(router) 2. 服务器未配置 URL 重定向（HTML5 模式需要） 3. 路由路径拼写错误

动态导入组件

对于大型应用，建议使用路由懒加载：

const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue')
  }
]

进阶配置

路由守卫

路由守卫允许在导航前后执行逻辑：

router.beforeEach((to, from, next) => {
  // 验证用户权限等逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

滚动行为

自定义页面滚动位置：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

总结

本文介绍了 Vue Router 的完整安装配置流程，包括：

• 通过 npm/yarn 或 CDN 安装
• 基本路由配置方法
• 两种历史记录模式的区别
• 实际应用案例
• 常见问题解决方案
• 进阶配置技巧

正确配置 Vue Router 是构建 Vue 单页面应用的基础，掌握这些知识将为后续学习嵌套路由、动态路由等高级特性打下坚实基础。