vue-router之什么是动态路由

GitHub:https://github.com/Ewall1106/mall/tree/master

1、动态路由有一个什么适用场景呢?

比如在写商品详情页面的时候,页面结构都一样,只是商品id的不同,所以这个时候就可以用动态路由动态。

2、官方文档

首先我们来看看官方文档上是怎么解释动态路由的?(https://router.vuejs.org/zh-cn/)

你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中。例如:
vue-router之什么是动态路由
路径参数

3、动手试一试

vue-router之什么是动态路由
vue-router之什么是动态路由

vue-router之什么是动态路由

$route.params.testId:获取当前路由的参数。

现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到:
vue-router之什么是动态路由

以上这就是动态路由的第一个模式了。

如果第一个模式你能看懂,那么表格中的第二个模式也就不在话下,我就不做标注解释了,同理;有疑问留言。
vue-router之什么是动态路由

vue-router之什么是动态路由

vue-router之什么是动态路由

参考链接
https://router.vuejs.org/zh-cn/