我们上一节有学过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的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方,欢迎给我留言,只要我会的,我都会第一时间回复。
就到这里了,休息休息一会儿吧:)明天继续加油噢!