【愚公系列】《循序渐进Vue.js 3.x前端开发实践》061-Vue Router的动态路由

🚀前言

在现代单页面应用（SPA）的开发中，灵活而高效的路由管理是实现良好用户体验的关键。而 Vue Router 作为 Vue.js 的官方路由管理工具，提供了强大的动态路由功能，使得开发者能够根据应用需求动态地配置和渲染路由。这种灵活性不仅可以简化代码结构，还能降低项目的复杂度，让开发者专注于业务逻辑的实现。

本文将深入探讨 Vue Router 中的动态路由，重点介绍如何定义和使用动态路由参数、如何通过动态路由实现更复杂的页面结构，以及如何在实际开发中利用动态路由提升应用的可维护性和扩展性。我们将通过实例演示，展示动态路由在不同场景下的应用，帮助你更好地理解这一强大功能的实际价值。

🚀一、Vue Router的动态路由

在 Vue Router 中，除了静态配置路由的方式（即在 main.js 文件中进行配置），还支持在运行时动态地添加和删除路由。这样可以让应用更灵活，特别是在一些场景中（如权限控制、按需加载等）需要动态控制路由时。

🔎1. 动态添加路由

addRoute 方法允许你在运行时向 Vue Router 中动态添加一条新的路由。动态添加的路由会立即生效。

🦋1.1 使用 addRoute 动态添加路由

例如，我们可以在 DemoOne.vue 组件中，通过点击按钮动态添加一条路由。

首先，修改 DemoOne.vue 文件：

<template>
  <h1>示例页面 1</h1>
  <el-button type="primary" @click="click">跳转到 Demo2</el-button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import Demo2 from './DemoTwo.vue'

let router = useRouter()

// 动态添加一条路由
router.addRoute({
  path: '/new/demo2',
  component: Demo2
})

// 跳转到动态添加的路由
function click() {
  router.push('/new/demo2')
}
</script>

在上面的代码中，我们做了以下几件事：

1. 使用 useRouter 获取路由实例。
2. 在 DemoOne 组件加载时，使用 addRoute 动态添加了一条路径为 /new/demo2 的路由，指向 Demo2 组件。
3. 通过点击按钮调用 router.push('/new/demo2') 来跳转到刚刚动态添加的路由。

注意：

• 如果你在浏览器直接访问 /new/demo2，会报错，因为路由是在页面加载后动态添加的，不在初始的路由配置中。只有在先访问 /demo1 并触发添加路由的代码后，才能跳转。

🦋1.2 动态添加重复路由

如果你在动态添加路由时，添加了一个已经存在的路由路径或名称，新的路由会覆盖旧的路由。

例如：

router.addRoute({
  path: '/demo2',
  component: Demo2,
  name: 'Demo2'
})

router.addRoute({
  path: '/d2',
  component: Demo2,
  name: 'Demo2'  // 重新定义了同名路由
})

在上述代码中，第二次添加的 /d2 路由会替换掉第一个 /demo2 路由。也就是说，后添加的路由会覆盖前面的同名路由。

🦋1.3 删除动态添加的路由

在使用 addRoute 方法时，返回的是一个删除路由的回调函数，你可以调用这个回调函数来删除动态添加的路由。

示例代码：

let call = router.addRoute({
  path: '/demo2',
  component: Demo2,
  name: 'Demo2'
})

// 调用回调函数删除路由
call()

通过执行 call()，我们可以直接删除刚刚动态添加的 /demo2 路由。

🦋1.4 通过路由名称删除路由

如果你为路由设置了名称，还可以通过路由名称来删除路由。例如：

router.addRoute({
  path: '/demo2',
  component: Demo2,
  name: 'Demo2'
})

// 通过名称删除路由
router.removeRoute('Demo2')

在这种情况下，removeRoute('Demo2') 会删除所有路径为 /demo2 且名称为 Demo2 的路由。同时，相关的别名和子路由也会被一并删除。

🔎2. 检查路由和获取路由

在 Vue Router 中，还提供了一些方法来检查和获取当前路由的状态。

🦋2.1 检查路由是否存在

可以使用 hasRoute 方法来检查某个路由是否已经被添加到路由中。例如：

console.log(router.hasRoute('Demo2'))  // 检查路由是否存在

hasRoute 方法会返回一个布尔值，表示路由是否已经注册。

🦋2.2 获取所有路由

getRoutes 方法可以用来获取当前所有已经注册的路由对象。它会返回一个包含所有路由的数组。

示例代码：

console.log(router.getRoutes())  // 获取所有已注册的路由

该方法返回的数组包含了当前所有的路由对象，可以用于调试或路由管理。

🔎3. 动态路由的使用场景

动态添加和删除路由在以下场景中非常有用：

• 权限控制：根据用户权限动态添加或删除某些路由。例如，某些路由仅在用户登录时可见，或者某些页面只能由特定角色访问。
• 按需加载：根据需要加载某些页面或组件，避免一次性加载所有页面。
• 路由重定向：动态修改路由，实现在运行时进行重定向或改变页面跳转行为。

🔎4.总结

1. 动态添加路由：通过 addRoute 方法，可以在应用运行时动态地添加一条路由。添加的路由会立即生效，但如果在浏览器中直接访问未添加的路由时，会报错。需要先访问某个路由，才能触发添加。
2. 删除路由：可以通过 addRoute 方法返回的删除回调函数来删除动态添加的路由，也可以通过 removeRoute 方法按路由名称删除路由。
3. 检查和获取路由：使用 hasRoute 和 getRoutes 方法可以检查路由是否存在和获取所有路由列表。

通过动态添加、删除和管理路由，Vue Router 提供了更加灵活的路由控制，使得应用能根据不同的需求进行高效的路由管理。