Vue2视频教程系列第四十节- url传参

我们上一节有学过vue官方提供的传参的方法，这种方法可能跟我们之前的传参的方式不太一样，但是确实是VUE官方推荐的传参方式，那今天呢我们将学习一下我们比较熟悉的传统的传参方法—url传参。大家可以按照自己的喜好进行选择就可以。

url传参的方法有三个步骤：

1. 在router.js里进行配置

2. 在url里传参，也就是DOM里的to属性里设置参数

3. 在接收页面进行接收参数

屏幕快照 2018-10-25 上午7.40.58.png

我们接下来按照步骤进行编写

第一步：

在router.js里配置，即配置该路由的传参参数，也很简单，就是在每个参数前加“:”

我们拿about这个路由来做示范，我们想传递id和title两个值，如下：
{ path: '/about/:id/:title', component: About, }
这第一步就配置好了。记得参数名前加上“:”。

第二步：

在to属性里设置参数值，这个参数值要与router.js里配置的参数名一一对应
<router-link to="/about/2018/vue redio">关于</router-link>
/about/之后就是参数值，所有的参数值都会存入vue里的params这个对象里

第三步：

我们在About.vue这个页面里接收数据
{{ $route.params.id }} -- {{ $route.params.title }}

这就是url传递参数的方法，与之前vue提供的官方的传参方法略有不同，需要对router.js进行配置。至于大家选择哪种方式，看大家的喜好了。

可能我的视频是会罗嗦一些，只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，只要我会的，我都会第一时间回复。

就到这里了，休息休息一会儿吧：）明天继续加油噢！
欢迎关注微信公众号：duzhan99