博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vueRouter-动态路由匹配
阅读量:7005 次
发布时间:2019-06-27

本文共 1075 字,大约阅读时间需要 3 分钟。

hot3.png

我们经常需要把某种模式匹配到的所有路由,全都映射到同一个组件,例如,我们有一个User组件,对于所有ID各不相同的用户,都要使用这个组件来渲染,那么我们可以在vue-router的路由路径中使用动态路径参数(dynamic segment)来达到这个效果

            

foo
bar

现在呢,像 /user/foo11 和 /user/bar11 都将映射到相同的路由。

你可以在一个路由中设置多段路径参数,对应的值都会设置到$route.params中,例如

模式 /user/:username              匹配路径 /user/evan               $route.params   {username:"evan"}
模式/user/:username/post/:post_id   匹配路径 /user/evan/post/123  $route.params {username:"evan",post_id:123}
除了$route.params外,$route对象还提供了其它有用的信息,例如,$route.query(如果URL中有查询参数)、$route.hash等等
响应路由参数的变化,提醒一下,当使用路由参数时,例如从/user/foo导航到user/bar,原来的组件实例会被复用,因为2个路由都渲染同一个组件,比起销毁再创建,复用则显得更加高效,不过,这也意味着组件的生命周期钩子不会再被调用,复用组件时,想对路由参数的变化做出响应的话,你可以简单的watch(监测变化)$route对象

            

foo
bar

foo
bar

 

转载于:https://my.oschina.net/u/2612473/blog/1535618

你可能感兴趣的文章
一个通过物理地址查询网卡所属厂商的Python库——mac.py
查看>>
rundeck yum 安装完成后跳转http://localhost:4440/menu/home问题解决 ...
查看>>
E3新秀Immerex发布VRG-9020,会是一款颠覆VR行业的头显吗? ...
查看>>
非root用户开启tomcat报错Permission denied
查看>>
Spring Boot系列(十)Spring Boot整合Elasticsearch全文搜索引擎 ...
查看>>
解决 EXT4 使用无法挂载
查看>>
回首2018 | 分析型数据库AnalyticDB:不忘初心 砥砺前行
查看>>
SpringCloud API网关-Zuul
查看>>
宽凳科技公布最新进展:已完成百余座城市数据采集,即将发布首张全自动高精度地图...
查看>>
GraphQL 分享 理论篇
查看>>
抓取猫眼电影top100的正则、bs4、pyquery、xpath实现方法
查看>>
Zabbix 中文显示(学习笔记四)
查看>>
财报显示阿里云“可怕”之处 和AWS等全球头部云厂商还差多少?
查看>>
Android GreenDao常用注解
查看>>
二十分钟教你如何将区块链应用与函数计算相结合
查看>>
Bootstrap wysiwyg,将富文本数据保存到mysql
查看>>
Linux cron crontab用法(转载)
查看>>
hadoop伪分布式安装部署HIVE
查看>>
Android Service与Activity之间通信的几种方式
查看>>
Bash脚本显示当前系统运行报告
查看>>