摘要:
传递字符串(适用传递简单的参数):
源文件传参:this.$router.push("/search/" + this.keywords);
目标文件取参:this.route.params.keywords
传递模板(很少用):
源文件传参:this.$router.push(`/search?keywords=${this.keywords}`);
目标文件取参:this.$route.query.keywords;
对象传递参数(最常用):
name+params,name+query,path+query:
【1】源文件传参name+params:
this.$router.push({
name: "search", //这里的name和router中配置的name一致
params: { keywords: this.keywords },
});
目标文件取参:
this.$route.params.keywords
【2】源文件传参name+query:
this.$router.push({
name: "search", //这里的name和router中配置的name一致
query: { keywords: this.keywords },
});
目标文件取参:
this.$route.query.keywords
【3】源文件传参(path只能和query一起用,不能用path+params):
this.$router.push({
path: "/search", //这里的path和router中配置的path一致
query: { keywords: this.keywords },
});
目标文件取参:
this.$route.query.keywords
目录
(1)参数拼接在路由地址中,?代表keywords 可以为空
1、传递字符串写法
需求:跳转到/register路由并传递参数keywords
(1)参数拼接在路由地址中,?代表keywords 可以为空
router文件路由:
- {
- name: 'search',
- path: '/search/:keywords?',
- component: () => import('@/view/apply/search.vue'),
- meta: {
- showfooter: true,
- }
- },
原页面跳转:
this.$router.push("/search/" + this.keywords); 或者
this.$router.replace("/search/" + this.keywords);
目标页面取参数keywords,用params:
this.route.params.keywords
(2)参数拼接在地址后面?参数名=参数值
router路由文件写法:
{
name: 'search',
path: '/search',
component: () => import('@/view/apply/search.vue'),
meta: {
showfooter: true,
}
},
原页面跳转:
this.$router.push("/search?keywords=" + this.keywords);
目标页面在query中取值参数keywords:
this.$route.query.keywords
2、模板字符串写法(不常用)
原页面跳转:
this.$router.push(`/search?keywords=${this.keywords}`);
目标页面在query中取值参数keywords:
this.$route.query.keywords;
3、对象传递参数写法(最常用,最灵活)
router文件:
{
name: 'search',
path: '/search',
component: () => import('@/view/apply/search.vue'),
meta: {
showfooter: true,
}
}
【1】源文件传参:
this.$router.push({
name: "search", //这里的name和router中配置的name一致
params: { keywords: this.keywords },
});
目标文件取参:
this.$route.params.keywords
【2】源文件传参:
this.$router.push({
name: "search", //这里的name和router中配置的name一致
query: { keywords: this.keywords },
});
目标文件取参:
this.$route.query.keywords
【3】源文件传参(path只能和query一起用,不能用path+params):
this.$router.push({
path: "/search", //这里的path和router中配置的path一致
query: { keywords: this.keywords },
});
目标文件取参:
this.$route.query.keywords
params和query传参的区别:
params传参,浏览器地址栏看不到,刷新页面,参数无法再次获取,相当于post传参。
query传参:浏览器地址栏能看到参数,刷新页面不会丢失,相当于get传参。