vue跳转页面的几种方法,vue跳转的几种方式
本文主要介绍vue页面跳转的实现，帮助大家更好的理解和使用vue。感兴趣的朋友可以了解一下。
一、this.$router.push()
1、vue
模板
div id=test
Button @click=goTo()单击跳转4/button
/div
/模板
2、script
//跳转前页面转移参数：
转到(项目){
//使用//storageData中的数据跳转到下一页，返回时可以返回跳转前的页面。
let storageData={
searchWords: this.keyWord，
页面大小：this.paging.pageSize，
pageNo: this.paging.currentPage
};
//data中的数据用于通过跳转函数将本页数据应用到下一页，与父子组件传递值相同。
let data={
类型：item.srcType，
tableName: item.tableName，
名称：item.datasourceName，
tableId: item.tableId
id: item.datasourceId，
};
//将下一页要用到的数据全部推送到$router中
这个。$router.push({
//name表示跳转后资源的前端访问路径，query用于存储要使用的数据，其中page为该页面的名称。
姓名：“在线搜索”，
查询：{targetData: data，storageData，
页面：“搜索”，
isBackSelect: true，
goBackName:数据搜索
}
})
}
3、跳转后的页面中获取上个页面的参数值
//跳转后从页面获取参数：
已安装(){
//检查跳转后参数是否已经传递给页面，如果是，根据需求调用。
console.log(这个。$ route . query . target data；)
}
4、从跳转后的页面返回跳转前页面
//将返回函数写入方法
goBackSheet() {
如果(这个。$ route . query . go back name=== data search ){
这个。$router.push({
名称：this.pageName，
查询：{
storageData:这个。$route.query.storageData，
isBackSelect: true，
}
});
}
}
二、router-link跳转
1、通过to属性指定目标地址
Query相当于get请求。页面跳转时，可以在地址栏看到请求参数；
刷新查询不会丢失查询中的数据；
使用路径引入查询。
Params相当于post请求，参数不会显示在地址栏中；
参数刷新将丢失参数中的数据；
参数应该以名称引入。
！-指定路线-
router-link :to={ name: user ，params:{ userId:123 } } @ click . native= goTo user/router-link
！-用查询参数，下面的结果是/register？计划=私人-
router-link:to= { path: register ，query:{ plan: private } } @ click . native= goTo register/router-link
2、跳转后页面
观察：{
$路线(至，自){
//刷新页面
这个。$ router . go(1)；
}
}
以上就是vue页面跳转的实现细节。更多关于vue页面跳转的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。