讲解vue-router之什么是动态路由-创新互联

前言: 今天我来给大家说道说道v-router,这是个什么东西?我们先从动态路由讲起。

创新互联公司科技有限公司专业互联网基础服务商,为您提供成都托管服务器高防服务器,成都IDC机房托管,成都主机托管等互联网服务。

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


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

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

2、官方文档

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

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

3、动手试一试

看不懂?有点迷糊?没关系,我们亲自上手试一试,实践出真章嘛。

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

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

③ 再到test.vue组件中敲:

在这里需要说明一下$route.params.testId是什么意思了,大概你也猜得出来,就是获取当前路由的参数。

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

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

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


上图:

参考链接


https://router.vuejs.org/zh-cn/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网页名称:讲解vue-router之什么是动态路由-创新互联
网站链接:http://bzwzjz.com/article/ggojg.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站建设 网站建设推广 专业网站设计 成都网站制作 企业网站建设 手机网站设计 网站制作 成都h5网站建设 自适应网站建设 成都网站制作 成都网站建设 成都网站建设 网站制作 成都营销网站制作 手机网站建设 重庆外贸网站建设 成都网站建设 网站设计 成都网站建设 外贸网站设计方案 教育网站设计方案 手机网站制作