讲解vue-router之什么是动态路由
前言： 今天我来给大家说道说道v-router，这是个什么东西？我们先从动态路由讲起。
GitHub：https://github.com/Ewall1106/mall/tree/master
1、动态路由有一个什么适用场景呢？
比如在写商品详情页面的时候，页面结构都一样，只是商品id的不同，所以这个时候就可以用动态路由动态。
2、官方文档
首先我们来看看官方文档上是怎么解释动态路由的？（https://router.vuejs.org/zh-cn/）
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到$route.params中。例如：
路径参数
3、动手试一试
看不懂？有点迷糊？没关系，我们亲自上手试一试，实践出真章嘛。
① 首先我们动手试一下上面表格中第一个模式的实现，我们新建一个文件夹并命名为view，然后在文件夹下新建test.vue
test.vue
② 到router文件夹下 》index.js文件 》打开并输入
index.js
③ 再到test.vue组件中敲：
test.vue
在这里需要说明一下$route.params.testId是什么意思了，大概你也猜得出来，就是获取当前路由的参数。
④ 现在输入localhost:8080/#/test/这里随便带个什么参数”就可以就可以看到：
Image.png
以上这就是动态路由的第一个模式了。
如果第一个模式你能看懂，那么表格中的第二个模式也就不在话下，我就不做标注解释了，同理；有疑问留言。
上图：
修改路由index.js文件
修改test.vue文件
浏览器中输入
参考链接
https://router.vuejs.org/zh-cn/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2中如何使用swiper@5.4.5问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了精读《Vue3.0 Function API》，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
SVG全称Scalable Vector Graphics,它是网络上使用最广泛的矢量图格式,在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,本文将给大家介绍Vue3中引入、封装和使用svg矢量图的实现示例,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章给大家详细介绍了Vue强制组件重新渲染的正确方法,非常的实用,有需要的小伙伴可以参考下2020-02-02
前端Vue全屏screenfull通用解决方案及原理详细分析
这篇文章主要给大家介绍了关于前端Vue全屏screenfull通用解决方案及原理的相关资料,使用screenfull这一第三方库可以实现更稳定的全屏功能,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue3 在＜script setup＞里设置组件name属性的方法
这篇文章主要介绍了Vue3 在＜script setup＞里设置组件name属性的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
Vue ElementUI实现:限制输入框只能输入正整数的问题
这篇文章主要介绍了Vue ElementUI实现:限制输入框只能输入正整数的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论