好资源导航 » 文章资讯 » vue 页面跳转的实现方式

vue 页面跳转的实现方式

2023-07-06 21:34:03 73

一、this.$router.push()

1、vue

2、script

//跳转前页面传参数：
goTo(item){
//storageData中数据用于跳转到下一个页面之后，进行返回时能够返回到跳转之前的页面
letstorageData={
searchWords:this.keyWord,
pageSize:this.paging.pageSize,
pageNo:this.paging.currentPage
};
//data中数据用于将本页面中数据通过跳转功能将其应用到下一个页面，与父子组件传值同理
letdata={
type:item.srcType,
tableName:item.tableName,
name:item.datasourceName,
tableId:item.tableId,
id:item.datasourceId,
};
//将下一个页面中将会用到的数据全部push到$router中
this.$router.push({
//name表示跳转之后的资源前端访问路径，query用于存储待使用数据，其中page是本页面name,
name:'onlineSearch',
query:{targetData:data,storageData,
page:'search',
isBackSelect:true,
goBackName：'dataSearch'
}
})
}

3、跳转后的页面中获取上个页面的参数值

//跳转后页面获取参数:
mounted(){
//查看是否已经参数是否传至跳转之后的页面，若传入，则根据需求进行调用
console.log(this.$route.query.targetData;)
}

4、从跳转后的页面返回跳转前页面

//将返回函数写到methods中
goBackSheet(){
if(this.$route.query.goBackName==='dataSearch'){
this.$router.push({
name:this.pageName,
query:{
storageData:this.$route.query.storageData,
isBackSelect:true,
}
});
}
}

二、router-link跳转

1、通过 to 属性指定目标地址

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数；

query刷新不会丢失query里面的数据；

query要用path来引入。

params相当于post请求，参数不会再地址栏中显示；

params刷新会丢失params里面的数据；

params要用name来引入。


User


Register

2、跳转后页面

watch:{
$route(to,from){
//刷新页面
this.$router.go(1);
}
}

以上就是vue页面跳转的实现方式的详细内容，更多关于vue页面跳转的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com