<template>
<div style="margin-top:10px">
<el-button>编程式路由跳转下方</el-button><br><br>
<el-button @click="handleNoCanShu">不带参数跳转</el-button>
<el-button @click="handleYesCanShu" type="success">携带参数跳转</el-button>
</div>
</template>
路由配置信息
routes:[
{
path:'/hrefnewPage',
name:'hrefnewPage',
component: HrefNewPage,
},
]
跳转的方法
// 带参数跳转
// query传参 地址栏看的出来信息
// params传参 地址栏看不出来信息
第一种传参方式 query传参
methods: {
handleNoCanShu(){ //直接跳转----不带参数
this.$router.push('/hrefnewPage');
},
handleYesCanShu(){
this.$router.push({path:'/hrefnewPage',query:{setid:this.projectId}});
},
}
第一种接收方式 新页面
created() {
this.getParams();
},
watch: {
$route: "getparams",
},
methods: {
getParams() {
this.receive = this.$route.query.setid // 第一种接收形式
},
},
第二种传传参的方式 params传参
methods: {
handleNoCanShu(){ //直接跳转----不带参数
this.$router.push('/hrefnewPage');
},
handleYesCanShu(){
this.$router.push({name:'hrefnewPage',params:{setid:this.projectId}});
},
}
第二种接收方式 新页面
created() {
this.getParams();
},
watch: {
$route: "getparams",
},
methods: {
getParams() {
this.receive = this.$route.params.setid // 第二种接收形式
},
},
解释说明:
传递参数的方法:
1.Params
由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。
及通过路由配置的name属性访问