vue-router相关理解

難釋懷
74 阅读4分钟

​

一、前言

随着 Vue.js 在前端开发中的广泛应用，Vue Router 成为了 Vue 官方推荐的路由管理器。它不仅支持单页面应用（SPA）中常见的路由跳转、嵌套路由、懒加载等功能，还提供了导航守卫、动态路由等高级特性。

本文将带你深入了解：

  • Vue Router 的基本概念；
  • 路由配置与使用方式；
  • 嵌套路由与命名视图；
  • 动态路由与懒加载；
  • 导航守卫机制；
  • 实际开发中的典型使用场景；

通过这篇文章，你将掌握 Vue Router 的核心功能与原理，能够熟练地在项目中进行路由管理。

二、什么是 Vue Router？

Vue Router 是 Vue.js 官方的路由管理库，用于构建单页应用（SPA），实现不同组件之间的切换和导航。

✅ 核心功能：

功能描述
路由映射将路径映射到组件
组件切换不刷新页面切换组件
参数传递支持动态路由参数（如 /user/:id）
嵌套路由实现父子级组件结构
懒加载异步加载组件，提升性能
导航守卫控制路由跳转逻辑（权限验证、登录拦截等）

三、Vue Router 的安装与配置

✅ 安装（Vue 3）

npm install vue-router@4

✅ 创建路由实例（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

✅ 在 main.js 中挂载路由

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

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

四、基础使用：路由跳转与组件渲染

✅ <router-link>：声明式导航

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

✅ <router-view>：动态渲染组件的位置

<router-view />

📌 效果：

  • 点击链接时，不会刷新页面；
  • 页面内容根据当前路径自动切换为对应组件；

五、动态路由与参数传递

✅ 动态路由示例

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

✅ 在组件中获取参数

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

📌 示例 URL：

  • /user/123 → this.$route.params.id === '123'

六、嵌套路由（父子路由）

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

✅ 路由配置

{
  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
  • /dashboard/settings

七、命名视图（多个 <router-view>）

适用于需要在同一页面展示多个组件区域，例如侧边栏 + 主体内容。

✅ 路由配置

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

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

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

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

懒加载是优化首屏加载速度的重要手段，Vue Router 支持异步加载组件。

✅ 使用 import() 实现懒加载

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

📌 特点：

  • 只有访问该路由时才会加载对应的组件；
  • 减少初始加载时间，提升用户体验；

九、导航守卫（Navigation Guards）

导航守卫用于控制路由的跳转逻辑，常用于权限验证、登录拦截、页面缓存等场景。

✅ 全局前置守卫：beforeEach

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login') // 未登录跳转登录页
  } else {
    next()
  }
})

✅ 路由独享守卫：beforeEnter

{
  path: '/profile',
  name: 'Profile',
  component: Profile,
  beforeEnter: (to, from, next) => {
    if (checkPermission(to.params.id)) {
      next()
    } else {
      next('/')
    }
  }
}

✅ 组件内守卫

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave
export default {
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('确定离开吗？数据可能未保存。')
    if (answer) {
      next()
    } else {
      next(false)
    }
  }
}

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

除了使用 <router-link> 进行跳转外，还可以通过 JS 方式实现导航。

// 字符串路径
this.$router.push('/home')

// 命名路由 + 参数
this.$router.push({ name: 'User', params: { id: 123 } })

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

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

问题解决方案
路由跳转后页面不更新使用 key 属性强制重新渲染组件
获取不到 $route 或 $router确保组件已正确注册并处于 <router-view> 内
动态添加路由无效使用 router.addRoute() 方法
多个 <router-view> 不生效检查是否遗漏了 name 属性或拼写错误
导航守卫无法阻止跳转检查是否调用了 next() 并正确返回结果

十二、总结对比表

功能推荐方式
基础路由跳转<router-link> + <router-view>
动态路由传参params / query
嵌套组件结构children 配置
多视图展示命名 <router-view>
按需加载组件() => import(...)
权限控制全局/路由/组件守卫
编程式跳转router.push() / replace()
推荐程度✅✅ 强烈推荐掌握

十三、结语

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

​

avatar
文章
阅读
粉丝