DDR爱好者之家

讲解vue-router之什么是动态路由
站长资源 2024/11/26 佚名
38 1538
DDR爱好者之家 Design By 杰米

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

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

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

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

2、官方文档

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

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

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

路径参数

3、动手试一试

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

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

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

test.vue

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

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

index.js

③ 再到test.vue组件中敲：

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

test.vue

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

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

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

Image.png

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

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

上图：

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

修改路由index.js文件

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

修改test.vue文件

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

浏览器中输入

参考链接

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米