Vue Router 基础与高级特性介绍 – wiki词典

作者： /

Vue Router 基础与高级特性介绍

在构建单页应用（SPA）时，路由管理是不可或缺的一部分。Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 深度集成，可以轻松实现客户端路由、动态路由匹配、嵌套路由、导航守卫等功能，为构建复杂的单页应用提供了强大的支持。

本文将从基础概念入手，逐步深入到 Vue Router 的高级特性，帮助您全面掌握 Vue Router 的使用。

一、Vue Router 基础

1. 什么是 Vue Router？

Vue Router 是 Vue.js 应用程序的官方路由。它允许您将应用程序的 URL 同步到组件的状态，从而在用户导航时，应用程序可以无需重新加载页面而仅更新视图。这为用户提供了流畅、响应迅速的体验。

2. 安装与基本使用

首先，您需要将 Vue Router 安装到您的项目中：

“`bash
npm install vue-router@next # Vue 3

或者

npm install vue-router # Vue 2
“`

然后，在您的 Vue 应用中配置和使用它。

Vue 3 示例 (main.js 或 main.ts):

“`javascript
import { createApp } from ‘vue’
import { createRouter, createWebHistory } from ‘vue-router’
import App from ‘./App.vue’
import Home from ‘./components/Home.vue’
import About from ‘./components/About.vue’

// 1. 定义路由组件
const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
]

// 2. 创建路由实例并传递 routes 配置
const router = createRouter({
history: createWebHistory(), // 使用 HTML5 History 模式
routes, // routes: routes 的缩写
})

// 3. 创建 Vue 应用实例并使用路由
const app = createApp(App)
app.use(router) // 挂载路由
app.mount(‘#app’)
“`

App.vue 中使用:

“`vue

“`

  • <router-link>: 用于在应用中进行导航。它会被渲染成一个 <a> 标签，to 属性是目标路径。
  • <router-view>: 路由组件的渲染出口。匹配到的组件将在此处渲染。

3. 动态路由匹配

很多时候，我们需要将 URL 中的一部分作为参数传递给组件，例如 /users/1、/users/2。Vue Router 通过动态路径参数来实现这一点。

javascript
const routes = [
{ path: '/user/:id', component: User }
]

在 User 组件中，可以通过 this.$route.params.id（Vue 2）或 route.params.id（Vue 3 Composition API）访问参数。

“`vue

“`

4. 嵌套路由

真实的应用界面通常由多层嵌套的组件组合而成。Vue Router 允许您以嵌套的方式定义路由结构。

javascript
const routes = [
{
path: '/user/:id',
component: User,
children: [ // 子路由
{
path: '', // 默认子路由，当访问 /user/1 时
component: UserProfile
},
{
path: 'posts', // 当访问 /user/1/posts 时
component: UserPosts
}
]
}
]

在父组件 User.vue 中，您还需要一个 <router-view> 来渲染子路由组件：

“`vue


“`

5. 编程式导航

除了使用 <router-link>，您还可以通过 JavaScript 方法实现导航。

“`javascript
// 在组件内部
this.$router.push(‘/home’) // 相当于点击
this.$router.push({ path: ‘/user/123’ })
this.$router.push({ name: ‘user’, params: { id: 123 } }) // 假设有命名路由 ‘user’

this.$router.replace(‘/home’) // 导航，但不会留下历史记录
this.$router.go(-1) // 后退一步
this.$router.back() // 等同于 go(-1)
this.$router.forward() // 前进一步
“`

在 Vue 3 Composition API 中：

“`vue

“`

二、Vue Router 高级特性

1. 命名路由

给路由命名可以方便地进行导航和管理，尤其是在路由路径发生变化时。

javascript
const routes = [
{
path: '/user/:id',
name: 'user', // 命名路由
component: User
}
]

使用命名路由进行导航：

vue
<router-link :to="{ name: 'user', params: { id: 123 }}">用户</router-link>

javascript
router.push({ name: 'user', params: { id: 123 } })

2. 命名视图

有时您可能希望在同一时间显示多个视图，而不是嵌套显示。命名视图可以帮助您在同一个路由下，使用多个 <router-view>。

javascript
const routes = [
{
path: '/',
components: {
default: Home,
a: Sidebar, // 渲染到 <router-view name="a">
b: Footer // 渲染到 <router-view name="b">
}
}
]

在 App.vue 中：

“`vue

“`

3. 重定向与别名

  • 重定向 (Redirect): 从一个路径自动跳转到另一个路径。

    javascript
    const routes = [
    { path: '/a', redirect: '/b' }, // 访问 /a 会自动重定向到 /b
    { path: '/c', redirect: { name: 'home' } },
    { path: '/d', redirect: to => {
    // 重定向可以是一个函数，返回路径或命名路由
    return { path: '/e', query: { id: to.params.id } }
    }}
    ]

  • 别名 (Alias): 允许您在同一个路由下，有多个 URL。用户访问别名路径时，URL 不会改变，但会渲染到别名对应的路由组件。

    javascript
    const routes = [
    { path: '/users', component: Users, alias: '/people' } // /users 和 /people 都会渲染 Users 组件
    ]

4. 路由组件传参 (Props)

您可以将路由参数直接作为 prop 传递给组件，而不是通过 $route 访问。这使得组件更解耦，更容易测试。

javascript
const routes = [
{
path: '/user/:id',
component: User,
props: true // 开启 props 传参，将 params 作为组件 prop
},
{
path: '/post/:id',
component: Post,
props: { // 静态 props
title: 'My Post',
author: 'Gemini'
}
},
{
path: '/search',
component: Search,
props: (route) => ({ // 函数式 props，可以将 query 参数作为 prop
query: route.query.q
})
}
]

在 User 组件中：

“`vue

“`

5. 导航守卫 (Navigation Guards)

导航守卫是 Vue Router 提供的钩子函数，用于在路由跳转过程中进行控制。它们可以用来进行权限验证、数据加载、页面统计等操作。

a) 全局守卫

在创建路由实例后，可以使用 router.beforeEach、router.beforeResolve、router.afterEach 注册全局守卫。

``javascript
router.beforeEach((to, from, next) => {
//to是目标路由对象
//from是当前导航即将离开的路由对象
//next` 是一个函数，必须调用它来 resolve 这个钩子
// next()：进入下一个钩子或路由
// next(false)：中断当前导航
// next(‘/login’) 或 next({ path: ‘/login’ })：重定向到不同地址

if (to.meta.requiresAuth && !isAuthenticated) { // 检查 meta 字段
next(‘/login’) // 如果需要认证且未登录，重定向到登录页
} else {
next() // 确保一定要调用 next()
}
})

router.afterEach((to, from) => {
// 导航完成后调用，没有 next() 参数
// 例如：记录页面访问
console.log(导航到 ${to.path} 完成)
})
“`

b) 路由独享的守卫

可以在路由配置中直接定义 beforeEnter 守卫。

javascript
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 只有在满足条件时才进入 /admin
if (isAdminUser) {
next()
} else {
next('/')
}
}
}
]

c) 组件内的守卫

在组件内部，您可以使用 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

“`vue

“`

6. 路由元信息 (Meta Fields)

您可以在路由配置中定义 meta 字段，存储任何需要的信息。这在导航守卫中特别有用，例如用于权限控制。

javascript
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] } // 路由元信息
},
{
path: '/public',
component: PublicPage,
meta: { requiresAuth: false }
}
]

在导航守卫中访问：to.meta.requiresAuth

7. 路由过渡效果

Vue Router 可以与 Vue 的 <Transition> 组件配合，为路由切换添加过渡动画。

“`vue

“`

8. 滚动行为

当切换到新路由时，页面默认会滚动到顶部。您可以通过 scrollBehavior 函数自定义这一行为。

javascript
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) { // 如果有保存的滚动位置，比如后退/前进
return savedPosition
} else {
// 总是滚动到顶部
return { top: 0 }
}
// 您也可以指定一个选择器，滚动到该元素
// return { el: '#main-content', behavior: 'smooth' }
}
})

9. 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载速度。如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

javascript
const routes = [
{
path: '/foo',
component: () => import('./components/Foo.vue') // 懒加载
},
{
path: '/bar',
component: () => import(/* webpackChunkName: "bar-group" */ './components/Bar.vue') // 命名分块
}
]

10. 路由模式 (History Modes)

Vue Router 提供了三种历史模式：

  • createWebHistory() (HTML5 History 模式): 推荐使用，URL 不带 #，看起来更像普通网站的 URL。需要服务器配置支持，以便在直接访问深层路由时返回 index.html。
  • createWebHashHistory() (Hash 模式): URL 带 #，如 example.com/#/foo。不需要服务器特殊配置。
  • createMemoryHistory() (Memory 模式): 不与 URL 交互，适用于非浏览器环境，如 Node.js 服务器端渲染。

三、总结

Vue Router 是 Vue.js 生态系统中一个强大且灵活的工具。从简单的路由配置到复杂的导航守卫、动态传参和性能优化（如路由懒加载），它提供了构建现代单页应用所需的一切功能。深入理解并熟练运用这些基础和高级特性，将极大地提升您的开发效率和应用的用户体验。

希望这篇详细的文章能帮助您更好地掌握 Vue Router！

滚动至顶部