Vue.js教学第十二章：Vue Router实战指南（二）

news2025/5/24 7:19:09

Vue Router（二）：深入剖析 Vue Router 高级特性

在前端开发领域，Vue.js 框架凭借其简洁、灵活和高效的特点，得到了广泛应用。而 Vue Router 作为 Vue.js 的官方路由管理器，为构建单页面应用（SPA）提供了强大的支持。本文将深入探究 Vue Router 的高级特性，包括路由的动态参数和查询参数的使用方法、路由的嵌套结构以及导航守卫（全局守卫、路由独享守卫、组件内守卫）的应用场景和配置方式，旨在帮助学习者掌握复杂的路由管理需求。

一、路由的动态参数和查询参数

（一）动态参数

动态参数用于在路由中传递可变的参数值，使页面能够根据不同参数展示对应的内容。定义动态路由时，在路径中使用冒号 : 后跟参数名称来指定动态段。

定义动态路由

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

在这种情况下，:id 就是一个动态参数。当访问 /user/123、/user/456 等路径时，会匹配到该路由，并将 id 参数传递给对应的组件。

在组件中访问动态参数

在组件内部，可以通过 $route.params 对象来获取动态参数的值。例如，在 User 组件中：

export default {
  name: 'User',
  mounted() {
    console.log(this.$route.params.id); // 输出动态参数 id 的值
  }
}

（二）查询参数

查询参数是在 URL 的末尾以 ?key=value 形式附加的参数，用于传递额外的信息。

定义包含查询参数的路由

const routes = [
  { path: '/search', component: Search }
]

访问 /search?keyword=vue&age=20 这样的 URL 时，就可以获取查询参数。

在组件中访问查询参数

在组件中通过 $route.query 对象来获取查询参数的值。例如，在 Search 组件中：

export default {
  name: 'Search',
  mounted() {
    console.log(this.$route.query.keyword); // 输出 'vue'
    console.log(this.$route.query.age); // 输出 '20'
  }
}