(一) 转新页面
1.追加跳转 this.$router.push()
使用说明: this.$router.push( { 跳转地址(可用name或path): ' 跳转地址名称或地址' , query(跳转后刷新不消失):{参数1:参数1 } ,params(跳转后刷新消失):{参数1:参数1 } } )
追加说明: 在本页面跳转,跳转后可以后退到之前的页面
实例: this.$router.push({name:'home',query:{id:‘123’}})
2.取代跳转 this.$router.replace()
使用说明: this.$router.replace( { 跳转地址(可用name或path): ' 跳转地址名称或地址' , query(跳转后刷新不消失):{参数1:参数1 } ,params(跳转后刷新消失):{参数1:参数1 } } )
追加说明: 在本页面跳转,跳转后不可以后退到之前的页面
实例: this.$router.replace({name:'home',query:{id:‘123’}})
3.新开页面跳转 const news = this.$router.resolve() window.open(news.href,'_blank')
使用说明: this.$router.resolve( { 跳转地址(可用name或path): ' 跳转地址名称或地址' , query(跳转后刷新不消失):{参数1:参数1 } ,params(跳转后刷新消失):{参数1:参数1 } } )
追加说明:跳转新页面
实例(1):const news = this.$router.resolve({name:'home',query:{id:‘123’}})
window.open(news.href,'_blank')
实例(2):{news }= this.$router.resolve({name:'home',query:{id:‘123’}})
window.open({news },'_blank')
(二) 参数接收 this.$route.query;
this.$route.params
使用说明:接收到的 query是页面跳转时设置的 query:{参数1:参数1 } ;取参数 1 this.$route.query.参数1
接收到的 params是页面跳转时设置的 params:{参数1:参数1 }
实例: console.log(this.$route.query.id);
(三) 实战
定义跳转方法,调用跳转时调用
showForm(index) {
// this.$router.replace({name: 'special_education', params: {id: index}}) //取代
this.$router.push({name:'special_education',query:{indexs:index}}) //追加
// const news = this.$router.resolve({name:'special_education', query: {indexs: index}})
// window.open(news.href,'_blank') //新开页面
}
定义接收方法,接收时调用
getParams() {
// 取到路由带过来的参数
this.mallCode =this.$route.query.indexs;
console.log(this.$route.query.indexs);
// 将数据放在当前组件的数据内
//this.mallInfo.searchMap.mallCode = routerParams;
//this.keyupMallName()
}
网友评论