vue页面相互跳转,vue超链接跳转新页面
本文主要介绍Vue实现相关页面多级跳转(页面钻取)功能的相关信息。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
背景
在项目开发过程中，我们经常会遇到从上一页跳到下一页的需求，俗称钻取。例如，如果要查看概览页面上的数据，请单击图表或按钮跳转到详细信息页面查看详细数据。
到目前为止，我们的项目都没有统一的页面跳转方法，实现页面跳转的方式也因人而异。而且现有的很多项目只能在两个页面之间来回跳转，基本上没有完全实现多个页面互相跳转的功能。
相关页面跳转作为项目的常用功能，是由重复的代码逻辑执行的，所以需要提取相关逻辑，封装成简单易用的公共方法和公共组件。
目的
统一各个项目的关联跳转方法的逻辑，封装成一个简单易用的通用组件。
方案设计
首先，分析相关页面跳转的一般逻辑步骤：
进入a页；
从A页跳到B页；
进入b页；
回到a页；
转到A页，也就是回到第一步重新开始。
然后，细分上述步骤：
假设步骤1是正常进入页面，此时没有逻辑需要处理；
第二步你需要从A页跳转到B页，要实现这一步，你必须知道B页的路由地址，通过VueRouter跳转到B页的路由地址。而如果B页需要一些查询数据，就需要保存B页的数据，等到第3步使用；
进入B页后，如果想从A页获取一些查询数据，首先要判断是否从A页跳转，如果是，就从存储数据的地方获取A页的数据；
从B页返回A页，必须知道A页的路由地址，通过VueRouter跳转到A页的路由地址。这里的路由地址需要在第二步跳转之前保存，以便在这里获取；
可以发现，第一步和第五步都进入了A页，只是执行逻辑不同。所以，如果A页想在跳转到B页之前恢复一些数据，就要先确定是否从B页跳回，如果是，就在从保存数据的地方跳转之前获取A页的数据。此处跳转前的数据需要在步骤2跳转前保存，以便在此处检索。
接下来，为了实现上述逻辑，我们首先确定用来保存A页和B页数据的方法，这里采用的是VUEX。梳理以上逻辑步骤，绘制流程图。
流程图
源页面
目标页面
具体实现
源页面跳转到目标页面。
这一步的逻辑是用VUEX写的。每次需要执行该步骤时，可以直接在VUEX中调整相应的方法。具体逻辑是在路由参数中加入源页面和目标页面的标识(目的是区分当前页面是目标页面还是返回的源页面)，然后保存源页面和目标页面的数据，再进行路由跳转。
在store.js中添加以下两个变量中的两个：
TgtPageParams: {}，///关联跳转的目标页面的数据(只保留一个数据)
SrcPageParams: []，///关联跳转的源页面数据(数组类型，保存多个页面的数据，可以分多层返回，直到返回初始页面)
然后添加以下方法：
//关联跳转，跳转到目标页面，将源页面和目标页面的数据保存到Vuex。
goTargetPage(状态，选项){
//在源页面的查询中加入tgtPageName logo，记住目标页面。
options.srcParams.query=object . assign({ }，options . src params . query，{ tgtPageName:options . TGT params . name })；
//在目标页面的查询中加入srcPageName logo，记住源页面。
options.tgtParams.query=object . assign({ }，options . TGT params . query，{ srcPageName:options . src params . name })；
state . srcpageparams . push(options . src params)；//保存源页面数据
state . tgtpageparams=options . TGT params；//保存目标页面数据
router . push({ name:options . TGT params . name，query:options . TGT params . query })；//跳转到目标页面
},
目标页面返回源页面
这一步的逻辑是用VUEX写的。每次需要执行该步骤时，可以直接在VUEX中调整相应的方法。具体逻辑是从state.srcPageParams中获取源页面的数据(包括路由地址和参数)，然后进行路由跳转。
在VUEX中添加以下方法：
//关联跳转，跳转回源页面。
goSourcePage(状态，虚拟机){
let obj=state . srcpageparams . slice(-1)[0]；//取数组的最后一项
//如果Vuex有上一页的数据，根据Vuex的数据返回上一页。
if (obj Object.keys(obj)。长度0) {
router.push({ name: obj.name，query:obj . query })；//跳一跳。
}
//如果Vuex中没有上一页的数据，但是路线上有上一页的标志，则根据路线的标志返回上一页(这是为了防止在详情页刷新时Vuex数据丢失无法返回上一页的问题)
else if (vm vm。$route.query.srcPageName) {
router.push({ name: vm。$ route . query . srcpagename })；
}
},
进入目标页面使用VUEX数据/返回源页面恢复VUEX数据
这一步的逻辑是将上述方案设计中的第3步和第5步结合起来，写入公共函数文件中。每次需要执行这一步时，可以直接在Vue.prototype中调整相应的方法，具体实现逻辑是：判断当前页面是源页面还是目标页面。如果是目标页面，则使用从源页面传输的数据。如果是源页面，恢复跳转前的数据。
在公共函数文件utils.js中添加以下方法，并将其挂载在Vue.prototype上：
/**
*此方法可用于链接与跳转相关的页面。
* 1.源页面：保存在Vuex中的数据可以恢复成数据使用。
* 2.目标页面：从源页面传输到Vuex的数据可以在data中使用。
* 3.当源页面的数据恢复后，删除Vuex中对应的备份数据和路由上保存的目标页面标识。
* @param vm {object}需要当前的Vue组件实例。
*/
$changeVueData: (vm)={
设TGT params=store . state . TGT pageparams；
设srcParams=vm。$ store . state . srcpageparams . slice(-1)[0] { }；//取最后一个元素值
设name=vm。$ route.name
设query=vm。$deepCopyJSON(vm。$ route . query)；//这里的深层复制是因为$route.query需要更新
//确定当前页面是目标页面还是源页面。
//判断条件首先是路由名称是否一致，然后是指定查询的属性值是否一致。
设isTgtPage=TGT params . name===name
(tgtParams.checkKeys？TGT params . check keys . every(key=TGT params . query[key]===query[key]):true)；
设isSrcPage=src params . name===name
(srcParams.checkKeys？src params . check keys . every(key=src params . query[key]===query[key]):true)；
//如果当前页面是目标页面
if (isTgtPage) {
对象分配(vm。$data，TGT params . data { })；//将源页面的数据更新为当前页面的data()，以便页面查询。
}
//如果当前页面是源页面
if (isSrcPage) {
对象分配(vm。$data，src params . data { })；//跳转前保存的数据更新为当前页面的data()，以便恢复页面。
store . commit( popSourcePage )；//删除srcPageParams的最后一个数据
//源页面关联跳转逻辑完成后，清除当前页面路径上的目标页面标识，防止页面刷新问题。
删除query.tgtPageName
vm。$router.push({ name，query })；
}
},
返回上一页按钮
为了更方便的使用关联跳转功能，将后退页面按钮封装成一个组件，具体实现代码如下：
//back-button.vue
模板
button class= primary-BTN return-BTN v-if= showback BTN @ click= back fn
I class= return-icon /I { { back text } }
/按钮
/模板
脚本
导出默认值{
名称：后退按钮，
道具：{
//返回上一页的文本
背景文本：{
类型：字符串，
默认值：()= Previous
},
//返回上一页的功能
backFn: {
类型：功能，
默认值：()={}
}
},
data() {
返回{
showbacktn:false，
};
},
已安装(){
this . setbackbtnshow()；
},
已激活(){
this . setbackbtnshow()；
},
方法：{
//更新按钮的状态以返回上一页
setBackBtnShow() {
这个。$nextTick(()={
让srcPage=this。$ store . state . srcpageparams . slice(-1)[0]；
this . showbacktn=Boolean(src page object . keys(src page))。长度0)；
});
},
},
};
/脚本
样式范围的语言=scss
/风格
容错部分
考虑到在关联跳转过程中，用户可能会突然中断或刷新页面等异常操作，设计了一些容错机制：
//根组件App.vue
/* .省略代码.*/
观察：{
//听着，当路线改变时。
$路线(至，自){
//如果既不是源页面也不是目标页面，则清除Vuex中保存的数据。
//防止关联跳转过程中切换菜单或其他操作，导致Vuex中上次关联跳转遗留的数据。
如果(！to.query.srcPageName！to.query.tgtPageName) {
这个。$ store . commit( clear target page )；
这个。$ store . commit( clear source page )；
}
},
},
/* .省略代码.*/
使用示例
按照上述方案设计部分的步骤：
步骤1和步骤5，进入页面A，逻辑在同一个页面，代码如下：
//page A.vue
/* .省略代码.*/
已安装(){
vm=this
vm。$ changeVueData(VM)；//通过关联跳转到相关页面。每次进入页面，都必须执行$changeVueData函数。具体用法请参考调用方法的注释。
VM . ready()；
},
/* .省略代码.*/
第二步，用下面的代码从页面A跳到页面B:
//page A.vue
/* .省略代码.*/
方法：{
//跳转到b页。
goUserSituation:函数(名称){
让srcParams={
名称：vm。$route.name，
查询：vm。$route.query
};
让tgtParams={
名称：“用户情况”，
数据：{
检查系统：名称
}
};
vm。$goTargetPage(srcParams，TGT params)；
},
},
/* .省略代码.*/
第三步，进入页面B，代码如下：
//页面B.vue
/* .省略代码.*/
已安装(){
vm=this
vm。$ changeVueData(VM)；//通过关联跳转到相关页面。每次进入页面，都必须执行$changeVueData函数。具体用法请参考调用方法的注释。
VM . ready()；
},
/* .省略代码.*/
步骤4，返回到页面A，代码如下：
//页面B.vue
/* .省略代码.*/
模板
差异
back button:back fn= $ gosource page /back button
/* .省略代码.*/
/div
/模板
/* .省略代码.*/
总结
本文详细介绍了相关页面多级跳转(页面钻取)功能的实现。核心思想是通过VUEX全局状态管理保存相关跳转源页面和目标页面的数据。在跳转之前，保存所需的数据。跳转到目标页面时，从VUEX获取目标页面所需的数据，跳转回源页面时，从VUEX还原源页面的数据。
将这些关键动作封装成通用的方法和组件，即统一了各个项目的相关页面跳转方式，也提高了代码质量，更有利于后期维护。另外，文章的容错部分只写了一部分。如果以后需要继续完善这个功能，可以完善容错部分。
关于Vue实现相关页面多级跳转(页面钻取)功能的这篇文章到此为止。更多关于相关Vue相关页面多级跳转的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。