动态路由

适用场景

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

文档解释

  • 首先我们来看看官方文档上是怎么解释动态路由的?
  • 你可以在一个路由中设置多段“路径参数”,对应的值都会设置到$route.params中,例如:
路径参数

使用

  • 首先我们动手试一下上面表格中第一个模式的实现,我们新建一个文件夹并其下新建test.vue
test.vue
  • router文件夹 > index.js > 打开并输入:
index.js
  • 再到test.vue组件中:
  • 在这里需要说明一下$route.params.testId是什么意思了,大概你也猜得出来,就是获取当前路由的参数。
    test.vue
  • 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到:
Image.png

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

模式二用法

  • 如果第一个模式你能看懂,那么表格中的第二个模式也就不在话下,我就不做标注解释了。
修改路由index.js文件
修改test.vue文件
浏览器中输入
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。