vue-router动态路由

207 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

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

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

2、官方文档

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

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

Snipaste_2021-10-27_09-39-06.png

3、动手试一试

① 首先我们动手试一下上面表格中第一个模式的实现,我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue

1.png

② 到router文件夹下 》index.js文件 》打开并输入

3.png

③ 再到test.vue组件中敲:

2.png 在这里需要说明一下$route.params.testId是获取当前路由的参数。

④ 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到:

4.png

第二种类型:

Snipaste_2021-10-27_09-44-45.png

Snipaste_2021-10-27_09-45-12.png

Snipaste_2021-10-27_09-45-50.png