1.传参时params要与name配合使用,query这没有这种要求
// 路由
const router = new VueRouter({
routes: [{
path: '/sign',
name: 'sign',
component: Sign
}]
});
// params传参
this.$router.push({
name: 'sign',
params: {
last: 'info'
}
});
// 地址栏展示为:127.0.0.1/sign
// 获取last值:this.$route.params.last
// query传参
this.$router.push({
path: '/sign', // 或name: 'sign'
query: {
last: 'info'
}
});
// 地址栏展示为:127.0.0.1/sign?last=info
// 获取last值:this.$route.query.last
2.路由组件中path路径中加参数,加的方式不同,参数获取方式也不同
const router = new VueRouter({
routes: [{
path: '/sign/:last',
component: Sign
}]
});
// 如果url为127.0.0.1/sign/info;
// 则有: const {last} = this.$route.params;
//last=info
const router = new VueRouter({
routes: [{
path: '/sign/?last=ifno',
component: Sign
}]
});
// 有: const {last} = this.$route.query;
//last=info
3.当url刷新时表现也不同
当编程式导航传参时,用params时,刷新页面时params带的数据会丢失;而query则不会。
网友评论