vue 3 第二十九章：路由管理（Vue Router4.x基础知识）

1. Vue Router 的介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，可以轻松地构建单页面应用程序。Vue Router 允许我们在应用程序中定义路由，然后根据 URL 来匹配路由，并渲染对应的组件。

Vue Router 的核心概念包括路由、路由器、路由视图和导航守卫。

• 路由：指 URL 和组件之间的映射关系
• 路由器：指管理所有路由的实例
• 路由视图：指根据 URL 匹配到的组件
• 导航守卫：指在路由切换时进行的一些处理操作

2. Vue Router 的安装和使用

2.1. 安装

// npm
npm install vue-router@4

// yarn 
yarn add vue-router@4

2.2. 使用

在 Vue Router 中，我们可以使用 VueRouter 类来创建一个路由器实例，并使用 router-link 和 router-view 组件来定义路由链接和路由视图。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

const app = createApp({})

app.use(router)

app.mount('#app')

在上面的例子中，我们使用 createRouter 函数创建了一个路由器实例，并使用 createWebHistory 函数来创建一个基于浏览器历史记录的路由模式。然后，我们定义了两个路由，分别对应 / 和 /about 路径。除了上面这种全局创建之外，更推荐的做法是创建一个 router.js 或 router/index.js 文件。

在模板中，我们可以使用 router-link 组件来定义路由链接，例如：

<template>
  <div>
  	<!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

在上面的例子中，我们使用 router-link 组件来定义 / 和 /about 两个路由链接。当用户点击链接时，Vue Router 会根据链接的 to 属性来匹配路由，并渲染对应的组件。

在路由视图中，我们可以使用 router-view 组件来渲染路由组件，例如：

<template>
  <div>
  	<!-- 路由出口 -->
  	<!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

在上面的例子中，我们使用 router-view 组件来渲染路由组件。当用户访问 / 路径时，Home 组件会被渲染到 router-view 组件中；当用户访问 /about 路径时，About 组件会被渲染到 router-view 组件中。

3. Vue Router 的路由配置和参数传递

3.1. 路由配置

在 Vue Router 中，我们可以使用 VueRouter 类来创建一个路由器实例，并使用 routes 属性来定义路由。每个路由都包含 path 和 component 两个属性，分别表示 URL 和对应的组件。例如，下面的例子中，我们定义了两个路由，分别对应 / 和 /about 路径：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
   { path: '/', component: Home },
   { path: '/about', component: About }
 ]
 
const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;

3.2. 参数传递

在 Vue Router 中，我们可以通过 URL 来传递参数。URL 参数可以通过 props 和 query 两种方式传递。

3.2.1. props

使用 props 传递参数时，我们需要在路由配置中定义 props 函数，返回一个对象，对象的属性名对应组件中的 props 属性名，属性值对应 URL 参数名。例如，下面的例子中，我们定义了一个路由，传递了一个 id 参数：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: route => ({ id: route.params.id })
    }
  ]
})

3.2.2. query

使用 query 传递参数时，我们可以在 URL 中添加查询参数，例如 /?id=1。在组件中，我们可以通过 $route.query 来获取查询参数。例如，下面的例子中，我们定义了一个路由，传递了一个 id 参数：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user',
      component: User,
      props: route => ({ id: route.query.id })
    }
  ]
})

3.3. 访问路由参数

注意：在 setup 形式下，不能使用this.$router和this.$route，作为替代，我们使用useRouter和useRoute函数：

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

console.log(router)
console.log(route)
</script>

4. Vue Router 的动态路由和嵌套路由

4.1. 动态路由

在Vue Router中，我们可以使用动态路由来匹配不同的 URL。动态路由是指包含参数的路由，参数可以通过 : 来定义。例如，我们可以使用 /user/:id 来定义一个动态路由，其中 :id 表示参数。在组件中，我们可以通过 $route.params 来获取参数。例如，下面的例子中，我们定义了一个动态路由，根据不同的ID渲染不同的用户信息：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

在上面的例子中，我们定义了一个 /user/:id 的动态路由，并渲染 User 组件。在 User 组件中，我们可以通过 $route.params.id 来获取 ID。

4.2. 嵌套路由

在 Vue Router 中，我们可以使用嵌套路由来组织复杂的页面结构。嵌套路由是指包含子路由的路由。例如，我们可以使用 /user 来定义一个父路由，然后在父路由中包含多个子路由。在组件中，我们可以使用 <router-view> 组件来渲染子路由对应的组件。例如，下面的例子中，我们定义了一个父路由 /user，包含两个子路由 /user/profile 和 /user/posts：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        {
          path: 'profile',
          component: Profile
        },
        {
          path: 'posts',
          component: Posts
        }
      ]
    }
  ]
})

在上面的例子中，我们定义了一个 /user 的父路由，并渲染 User 组件。在 User 组件中，我们使用 <router-view> 组件来渲染子路由对应的组件。在父路由中，我们使用 children 属性来定义子路由。

5. 路由重定向

在某些情况下，我们可能需要将某个路由重定向到另一个路由，例如将 /a 重定向到 /b。我们可以通过在路由配置中使用 redirect 来实现这一功能。

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

我们还可以使用命名路由来实现重定向：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

如果我们需要动态的重定向到一个路由，则可以在 redirect 中使用一个函数来实现：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 动态返回重定向目标
      return '/b'
    }}
  ]
})

需要注意的是，如果我们使用了命名路由，那么在重定向时也需要使用命名路由。

6. Vue Router 的导航守卫和跳转控制

Vue Router 中的导航守卫可以用来控制路由的跳转，包括全局导航守卫、路由独享的导航守卫和组件内的导航守卫。

6.1. 全局导航守卫

全局导航守卫会在每次路由跳转时都被调用，包括 beforeEach、beforeResolve 和 afterEach 三个方法。其中，beforeEach 方法用来进行路由跳转前的验证，可以通过 next 方法来进行跳转，例如：

6.1.1. 全局前置守卫（beforeEach）

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

每个守卫方法接收两个参数：

• to: 即将要进入的目标
• from: 当前导航正要离开的路由

可以返回的值如下:

• false: 取消当前的导航。如果浏览器的URL改变了(可能是用户手动或者浏览器后退按钮)，那么URL地址会重置到from路由对应的地址。
• 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用router.push()一样，你可以设置诸如replace: true或name: 'home'之类的配置。当前的导航被中断，然后进行一个新的导航，就和from一样。

router.beforeEach(async (to, from) => {
   if (
     // 检查用户是否已登录
     !isAuthenticated &&
     // ❗️ 避免无限重定向
     to.name !== 'Login'
   ) {
     // 将用户重定向到登录页面
     return { name: 'Login' }
   }
 })

可选的第三个参数 next:
进行路由跳转前的验证，并使用next方法来进行跳转。

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

6.1.2. 全局解析守卫（beforeResolve）

在导航被确认之前，和全局后置守卫（beforeEach）相似，我们也可以注册一个全局解析守卫。这个守卫在全局前置守卫 (beforeEach)、路由独享的前置守卫(beforeRouteEnter)之后调用。

与全局前置守卫不同的是，它会在所有异步路由被解析之后调用，也就是在所有懒加载的组件被加载完之后。

const router = new VueRouter({ ... })

router.beforeResolve((to, from, next) => {
  /* 在某些情况下，可能需要等待异步组件加载完成后才能执行后续操作 */
  next()
})

注意，该守卫不会像全局前置守卫一样，接收一个回调函数来调用 next 方法。相反，你只需要像 beforeEach 一样调用 next 方法，就可以被解析的异步组件所依赖的所有组件都被解析完毕。

6.1.3. 全局后置钩子（afterEach）

和全局前置守卫、全局解析守卫相似，我们也可以注册一个全局后置守卫。这个守卫在每个路由导航结束后被调用，即在所有的组件渲染完成之后，无论导航是成功的还是被中断的。

const router = new VueRouter({ ... })

router.afterEach((to, from) => {
  /* 在这里执行一些操作 */
})

常用于页面分析、动态修改页面标题等。
需要注意的是，这里没有 next 方法，也无法改变导航本身。

6.2. 路由独享的导航守卫（beforeEnter）

除了全局前置守卫和全局解析守卫之外，我们还可以在路由配置上直接定义一个 beforeEnter 守卫。这个守卫只会对当前路由起作用。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

beforeEnter 的使用方式与全局前置守卫相同，接收三个参数 (to, from, next)，并通过调用 next 方法来决定路由的行为。

需要注意的是，beforeEnter 不会像全局解析守卫一样等待异步组件加载完成后再调用，因此在使用异步组件时需要特别注意。

6.3. 组件内的导航守卫

在组件内部，我们也可以定义导航守卫。和全局导航守卫的使用方式相同，我们可以在组件配置中定义 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 三个导航守卫。这些守卫不同于全局导航守卫，它们可以访问组件实例 this，因此可以对组件进行更细粒度的控制。

• beforeRouteEnter: 在路由进入前被调用。此时组件尚未被创建，因此无法访问组件实例 this，但可以通过传递一个回调函数来访问组件实例。
• beforeRouteUpdate: 在路由更新时被调用（例如，使用相同组件的不同路由）。它可以访问组件实例 this，因此可以在路由更新时更改组件内部的状态。
• beforeRouteLeave: 在路由离开当前组件时被调用。它可以访问组件实例 this，因此可以在路由离开前执行一些清理操作。

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在路由进入前被调用
    // 无法访问组件实例 `this`
    // 但可以通过传递一个回调来访问组件实例
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate (to, from, next) {
    // 在路由更新时被调用
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 在路由离开当前组件时被调用
    // 可以访问组件实例 `this`
  }
}

需要注意的是，这些导航守卫只对当前组件起作用，因此如果需要在多个组件中共享相同的导航守卫，仍然需要使用全局导航守卫。文章来源地址https://www.toymoban.com/news/detail-467018.html

到了这里，关于vue 3 第二十九章：路由管理（Vue Router4.x基础知识）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！