Vue Router 使用简解

Vue Router 是 Vue.js 生态系统中的一个核心插件，旨在帮助开发者轻松地在单页面应用程序 (SPA) 中实现路由功能。在这篇博客中，我们将深入探讨 Vue Router 的各个方面，包括其基本概念、配置和高级用法。

1. 什么是 Vue Router？

Vue Router 是 Vue.js 的官方路由管理器。它与 Vue.js 无缝集成，能够帮助你构建单页面应用程序，并且支持以下特性：

• 嵌套路由：允许在一个路由组件内定义子路由。
• 动态路由匹配：使用路径参数实现动态路由。
• 模块化、基于组件的路由配置：路由与 Vue 组件紧密结合，配置简洁直观。
• 路由参数：支持在路径中定义参数并在组件中使用。
• 路由守卫：提供多种导航守卫钩子，允许在路由跳转前后进行拦截和处理。
• 路由元信息：可以为路由添加自定义元数据，以便在导航守卫或组件中使用。
• 滚动行为控制：控制路由切换时页面滚动位置。
• 历史模式与哈希模式：支持使用 HTML5 History API 或 URL 哈希模式来实现路由。

2. 安装 Vue Router

首先，确保你已经安装了 Vue.js。然后，可以通过以下方式安装 Vue Router：

npm install vue-router

在你的 Vue 项目中，创建一个 router 文件夹，并在其中创建 index.js 文件，用于配置路由。

3. 基本使用

创建路由配置

在 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(process.env.BASE_URL),
  routes
})

export default router

在 Vue 实例中使用路由

在你的 main.js 文件中，导入并使用路由：

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

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

创建视图组件

在 views 文件夹中，创建对应的视图组件，比如 Home.vue 和 About.vue：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

使用 <router-link> 和 <router-view>

在你的 App.vue 中，使用 <router-link> 进行导航，使用 <router-view> 显示匹配的组件：

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

函数介绍：

• createRouter: 用于创建路由实例，接收一个配置对象作为参数。
  • 参数：
    • history：用于定义路由模式，常用的有 createWebHistory() 和 createWebHashHistory()。
    • routes：定义路由规则的数组。
• createWebHistory: 创建 HTML5 模式的历史记录。
  • 参数：
    • base：可选，应用的基路径。
• createWebHashHistory: 创建哈希模式的历史记录（URL 带有 #）。
  • 参数：
    • base：可选，应用的基路径。

4. 嵌套路由

Vue Router 支持嵌套路由，这对于复杂的应用程序非常有用。

import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'
import Settings from '../views/Settings.vue'

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'profile',
        component: Profile
      },
      {
        path: 'settings',
        component: Settings
      }
    ]
  }
]

在视图组件中使用 <router-view> 渲染子路由：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <router-view/>
  </div>
</template>

5. 动态路由匹配

动态路由匹配允许你在路径中使用变量。

import User from '../views/User.vue'

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

在组件中，你可以通过 this.$route.params 访问动态参数：

<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

函数介绍：

• $route.params: 存储路由参数的对象，可以通过 this.$route.params.id 获取路径中的 id 参数。

6. 路由守卫

路由守卫允许你在导航前进行一些操作，如权限验证或数据获取。

全局守卫

router.beforeEach((to, from, next) => {
  if (to.path === '/protected' && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

路由独享守卫

const routes = [
  {
    path: '/protected',
    component: Protected,
    beforeEnter: (to, from, next) => {
      if (!isAuthenticated()) {
        next('/login')
      } else {
        next()
      }
    }
  }
]

组件内守卫

export default {
  beforeRouteEnter (to, from, next) {
    // 在进入路由前调用
    next(vm => {
      // 在导航被确认时调用
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变但该组件被复用时调用
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    next()
  }
}

函数介绍：

• beforeEach: 注册一个全局前置守卫，在每次导航前调用。
  • 参数：
    • to：即将进入的目标路由对象。
    • from：当前导航正要离开的路由。
    • next：函数，必须调用该方法来 resolve 这个钩子，执行效果依赖 next 方法的调用参数。
• beforeEnter: 注册一个路由独享的守卫，只在进入该路由前调用。
  • 参数：
    • to：即将进入的目标路由对象。
    • from：当前导航正要离开的路由。
    • next：函数，必须调用该方法来 resolve 这个钩子，执行效果依赖 next 方法的调用参数。
• beforeRouteEnter: 组件内守卫，在路由进入前调用。
  • 参数：
    • to：即将进入的目标路由对象。
    • from：当前导航正要离开的路由。
    • next：函数，必须调用该方法来 resolve 这个钩子，执行效果依赖 next 方法的调用参数。
• beforeRouteUpdate: 组件内守卫，在当前路由改变但该组件被复用时调用。
  • 参数：
    • to：即将进入的目标路由对象。
    • from：当前导航正要离开的路由。
    • next：函数，必须调用该方法来 resolve 这个钩子，执行效果依赖 next 方法的调用参数。
• beforeRouteLeave: 组件内守卫，在导航离开该组件的对应路由时调用。
  • 参数：
    • to：即将进入的目标路由对象。
    • from：当前导航正要离开的路由。
    • next：函数，必须调用该方法来 resolve 这个钩子，执行效果依赖 next 方法的调用参数。

7. 路由元信息

路由元信息可以帮助你在路由配置中定义自定义的数据。

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true }
  }
]

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

函数介绍：

• to.matched: 一个数组，包含了导航到的路由记录（包括嵌套路由）。
• some: 数组方法，用于判断是否有至少一个元素满足条件。

8. 滚动行为控制

你可以在路由配置中定义滚动行为，以实现页面切换时的滚动位置控制。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

函数介绍：

• scrollBehavior: 一个函数，用于控制路由切换时的滚动行为。
  • 参数：
    • to：目标路由对象。
    • from：离开的路由对象。
    • savedPosition：当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

9. 历史模式与哈希模式

Vue Router 默认使用哈希模式 (URL 中带有 #)，你也可以选择使用 HTML5 的历史模式。

哈希模式

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

历史模式

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

函数介绍：

• createWebHashHistory: 创建哈希模式的历史记录实例。
  • 参数：
    • base：可选，应用的基路径。
• createWebHistory: 创建 HTML5 模式的历史记录实例。
  • 参数：
    • base：可选，应用的基路径。

结论

Vue Router 是一个功能强大且灵活的路由管理器，能够帮助你轻松地构建复杂的单页面应用程序。通过本文的介绍，你应该已经掌握了从基础到高级的各种用法。希望这篇博客能够帮助你更好地理解和使用 Vue Router，在你的 Vue.js 项目中实现优雅的路由管理。