Vue基本路由

一、前言

随着单页应用（SPA）的普及，前端路由成为了构建现代 Web 应用不可或缺的一部分。Vue Router 是 Vue 官方推荐的路由管理器，它能够轻松实现页面之间的无刷新切换，让用户体验更流畅。

本文将带你深入了解：

• Vue 路由的基本概念；
• 如何安装和配置 Vue Router；
• 实现页面跳转的基础方法；
•  和  的使用；
• 动态路由与嵌套路由简介；
• 实际开发中的常见问题与解决方案；

通过这篇文章，你将掌握 Vue 路由的基本使用，为后续学习更高级功能打下坚实基础。

二、什么是 Vue 路由？

Vue 路由（Vue Router）是 Vue.js 官方提供的路由管理库，用于实现不同组件之间的切换与导航，支持路径匹配、参数传递、懒加载等功能。

✅ 核心作用：

作用	描述
页面跳转	不刷新页面切换组件
路由映射	将 URL 映射到对应的组件
参数传递	支持动态路径传参（如 /user/123）
嵌套结构	支持父子级路由嵌套
懒加载	异步加载组件，提升性能

三、Vue 路由的安装

以 Vue 3 为例，使用 vite 或 vue-cli 创建项目后，可以通过以下命令安装 Vue Router：

npm install vue-router@4

四、创建并挂载路由实例

✅ 步骤一：创建路由配置文件（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: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

✅ 步骤二：在入口文件中挂载路由（src/main.js）

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

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

五、基本使用：页面跳转与组件展示

✅ 1. 使用  进行跳转

是 Vue Router 提供的声明式导航组件，点击后不会刷新页面，而是切换组件内容。

✅ 2. 使用  展示对应组件

是一个占位符，根据当前路径自动渲染对应的组件。

六、动态路由传参

有时我们需要根据不同的参数展示不同的内容，例如用户详情页 /user/123。

✅ 1. 配置动态路由

{
  path: '/user/:id',
  name: 'User',
  component: () => import('../views/User.vue')
}

✅ 2. 在组件中获取参数

export default {
  mounted() {
    console.log('用户 ID:', this.$route.params.id)
  }
}

示例访问：

• 访问 /user/123 → 输出 用户 ID: 123
• 访问 /user/456 → 输出 用户 ID: 456

七、编程式导航（JS 控制跳转）

除了使用 ，我们也可以通过 JavaScript 主动控制路由跳转。

// 跳转到指定路径
this.$router.push('/about')

// 带参数跳转
this.$router.push({ name: 'User', params: { id: 123 } })

// 替换当前路径（不产生新历史记录）
this.$router.replace('/contact')

八、嵌套路由（父子结构）

适用于布局嵌套、多级菜单等场景。

✅ 路由配置

{
  path: '/dashboard',
  name: 'Dashboard',
  component: DashboardLayout,
  children: [
    {
      path: 'profile',
      component: Profile
    },
    {
      path: 'settings',
      component: Settings
    }
  ]
}

✅ 页面结构（DashboardLayout.vue）

访问路径：

• /dashboard/profile → 显示 Profile 组件
• /dashboard/settings → 显示 Settings 组件

九、命名视图（多个组件区域）

适用于需要在同一页面展示多个组件的情况，如侧边栏 + 内容区。

✅ 路由配置

{
  path: '/layout',
  components: {
    default: MainContent,
    sidebar: SideBar
  }
}

✅ 模板中使用多个 

十、懒加载组件（按需加载）

懒加载是优化首屏加载速度的重要手段。

✅ 使用异步导入组件（懒加载）

{
  path: '/contact',
  name: 'Contact',
  component: () => import('../views/Contact.vue')
}

特点：

• 只有访问该路由时才会加载组件；
• 减少初始请求资源体积，提高加载速度；

十一、常见问题与解决方案

问题	解决方案
页面跳转后组件不更新	使用 key 属性强制重新渲染组件
获取不到 $route 或 $router	确保组件已正确注册并处于  内
动态添加路由无效	使用 router.addRoute() 方法
多个  不生效	检查是否遗漏了 name 属性或拼写错误
页面空白无内容	检查路由路径是否正确，是否未匹配任何组件

十二、总结对比表

功能	推荐方式
页面跳转
组件展示
动态传参	params
编程式跳转	router.push() / replace()
嵌套结构	children 配置
多视图	命名
按需加载	() => import(...)
推荐程度	✅✅ 强烈推荐掌握

十三、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！