Vue.js教学第十二章:Vue Router实战指南(二)

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'
  }
}

(三)动态参数与查询参数的对比

对比项 动态参数 查询参数
定义方式 在路径中使用 :参数名 在 URL 末尾以 ?key=value 形式附加
获取方式 $route.params $
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

暮雨哀尘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值