vue本页面跳转不刷新

当前页面有四个按钮，每个按钮跳转的页面都是自己本身，只不过内容不一样。（需要调用后端api查询方法）

使用vue祖传的push()方法来挑转的话，你会发现可以跳转过去，但是页面会刷新。不会触发vue生命周期函数。

解决办法：三种方式自己看需要使用。

方式一：

this.$router.replace({
path: '/case-detail',
query: {
caseId: this.detailInfo.parentId
}
})
this.caseFan()          //添加页面初始化获取数据的方法  这样子可以就实现了页面跳转 而且是新的数据。但是有一个问题，但我们点击返回 是想返回上一个详情页.这样子页面栈丢失了返回不到上一个案件详情了

方式二：

 let newUrl = this.$router.resolve({path: "/case-detail",query: {caseId: this.detailInfo.parentId,},});window.open(newUrl.href, "_self");使用a链接的跳转方式，去跳转 ，测试发现不能使用  _self属性 在当前页面打开，也是地址栏变化，不会刷新，可能也需要添加初始化的方法去收取数据；以及一些其他属性 ： _blank 打开新的页面是执行vue的生命周期 ，想想也是一个新的页面肯定会执行一次。

方式三：监听路由

watch: {$route() {//监听相同路由下参数变化的时候，从而实现异步刷新// this.loading = true;//重新获取数据this.caseFan();},},

vue本页面跳转不刷新相关推荐

vue实现页面跳转过渡效果 transition
vue实现页面跳转过渡效果当我们做移动端页面的页面跳转时,不想让页面跳转的那么生硬,所以需要添加过渡效果 html部分(name="fade" 这是关键一步,fade 是自定义c ...
js页面跳转和js对iframe进行页面跳转、刷新
js页面跳转和js对iframe进行页面跳转.刷新一.js方式的页面跳转 1.window.location.href方式 <script language="javascr ...
html中js实现跳转,JS实现页面跳转与刷新的方法汇总
window.location(.href)="url" 其实 .href 可以省略 window.location和 window.location.href实现的效果是一样的 ...
Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...
vue中路由跳转怎样刷新页面保证页面更新
vue中我们实现从一个页面点击某一项跳转到另外一个页面事使用在点击事件中定义 <card @click.native="viewMoreRelation(item)" :ar ...
vue项目页面跳转的常用方法
1.页面跳转的几种方法 1:router-link跳转 2:this.$router.push() 3:this.$router.replace() 4:this.$router.go(n) 1. r ...
VUE 自身页面跳转自身页面
先说一下要实现的功能: 点击原案件,要回到原案件,但是原案件页面和现在的页面一样,也就是自身跳转自身页面,路由地址不变. 使用vue祖传的push()方法来挑转的话,你会发现可以跳转过去,但是页面会刷 ...
Vue route页面跳转，传递参数接收到的参数为空
Vue在处理页面跳转传递参数的时候 var devId = row.id; this.$router.push({ name: '/showDevs/devDetail' ,params:{" ...
vue中页面跳转传值_vue跳转方式（打开新页面）及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...

vue本页面跳转不刷新

vue本页面跳转不刷新相关推荐

最新文章

热门文章