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

这篇文章主要为大家详细介绍了讲解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/

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

本文来自：http://www.q1010.com/184/5474-0.html

注：关于讲解vue-router之什么是动态路由的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js