Vue基本路由

難釋懷
55 阅读4分钟

​

一、前言

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

本文将带你深入了解：

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

通过这篇文章，你将掌握 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. 使用 <router-link> 进行跳转

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

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

✅ 2. 使用 <router-view> 展示对应组件

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

    <!-- 组件会在这里显示 -->
    <router-view />
  </div>
</template>

📌 <router-view> 是一个占位符，根据当前路径自动渲染对应的组件。

六、动态路由传参

有时我们需要根据不同的参数展示不同的内容，例如用户详情页 /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 控制跳转）

除了使用 <router-link>，我们也可以通过 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）

<template>
  <div>
    <h2>仪表盘布局</h2>
    <router-view /> <!-- 子路由组件显示在此处 -->
  </div>
</template>

📌 访问路径：

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

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

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

✅ 路由配置

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

✅ 模板中使用多个 <router-view>

<router-view />
<router-view name="sidebar" />

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

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

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

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

📌 特点：

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

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

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

十二、总结对比表

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

十三、结语

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

​

avatar
文章
阅读
粉丝