动态路由的概念:
把hash地址中的可变部分用【英文冒号(:)+参数 】的形式进行定义
![](https://www.icode9.com/i/l/?n=22&i=blog/1190148/202208/1190148-20220817233649893-1389633902.png)
获取动态路由的参数值:
(1)第一种获取方式:可以直接使用 $route.params对象访问到动态匹配的参数
![](https://www.icode9.com/i/l/?n=22&i=blog/1190148/202208/1190148-20220817233709361-925052874.png)
效果:
![](https://www.icode9.com/i/l/?n=22&i=blog/1190148/202208/1190148-20220817233749025-985499603.png)
(2)第二种获取方式:在路由规则中开启允许props传参,然后在组件中用 props 接收路由中的参数
![](https://www.icode9.com/i/l/?n=22&i=blog/1190148/202208/1190148-20220817234959454-798287768.png)
![](https://www.icode9.com/i/l/?n=22&i=blog/1190148/202208/1190148-20220817235047503-1357891328.png)
效果:
![](https://www.icode9.com/i/l/?n=22&i=blog/1190148/202208/1190148-20220817235303014-1072080877.png)
标签:vue,获取,参数,props,------,router,动态,路由
来源: https://www.cnblogs.com/zhaoyingzhen/p/16597275.html