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

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

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

　　1. 在router.js里进行配置

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

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

　　

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

　　第一步：

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

　　我们拿about这个路由来做示范，我们想传递id和title两个值，如下：

　　{

　　path: '/about/:id/:title',

　　component: About,

　　}

　　这第一步就配置好了。记得参数名前加上“:”。

　　第二步：

　　在to属性里设置参数值，这个参数值要与router.js里配置的参数名一一对应

　　关于

　　/about/之后就是参数值，所有的参数值都会存入vue里的params这个对象里

　　第三步：

　　我们在About.vue这个页面里接收数据

　　{{ $route.params.id }} -- {{ $route.params.title }}

　　$route是vue里的内置对象，不要忘掉写$

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

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

　　就到这里了，休息休息一会儿吧：）明天继续加油噢！