vue-route传参方式
一:方案一
路由配置:
{ path: '/about/:id', name: 'about', component: () => import ('./views/About.vue') }
触发方式:
getClick(){ this.$router.push( '/about/123' ); }
获取方式:
this.$route.params.id
二:方案二
路由配置:
{
path: '/about',
name: 'about',
component: () =>
import ('./views/About.vue')
}
触发方式:
getClick(){
this.$router.push( {name:'about',params:{id:123}} );//注意如果name换成path ,params获取不到
}
获取方式:
this.$route.params.id
二:方案二
路由配置:
{ path: '/about', name: 'about', component: () => import ('./views/About.vue') }
触发方式:
getClick(){ this.$router.push( {name:'about',query:{id:123}} ); }
获取方式:
this.$route.query.id
总结:
方法二与方法三区别:params类比ajax中的post请求在url地址栏是看不到传参的,用query类比ajax中的get请求在url地址栏是可以看到传参;
参考:https://segmentfault.com/a/1190000012393587