vue执行操作成功但页面不刷新_Vue.js控制页面在不刷新的情况下向前和向后刷新...

场景: 页面A->页面B->页面C

用户希望将页面从页面A刷新到页面B，并在从页面C返回时保留页面缓存.

1. 使用keep-alive组件来控制需要通过include进行缓存的页面.

缓存的页面不会被破坏，但是不能满足要求. 来自A和C的页面将保留页面缓存，并且进入B页面时不会刷新. 因此，您需要控制页面在需要时刷新. 在实现过程中使用以下内容. 有两种方法(不推荐):

方法1.直接调用相应页面的$ destory()方法

goBack() { // 调用路由返回方法的同时

this.$router.back();

this.$destroy()

},

可以执行关闭页面的功能(下次重新打开页面，它将被初始化)，但是存在问题. $ destroy(). 当页面缓存被破坏时，该页面将不再被缓存，也就是说，当第二次进入B页面时，该B页面将不再被缓存.

方法2.使用此方法返回. $ router.push()js 后退不刷新，push方法可以传递参数是否刷新页面

可以实现页面的路由刷新控制，达到返回传递的参数的效果. 除了移动终端上的手势功能(与浏览器的后退按钮功能相同)外，正常的页面跳转均正常运行. 向后显示历史记录堆栈中的页面，并使用推回而不是back方法将继续推入堆栈，因此使用手势返回将导致路由跳转混乱和页面显示错误.

2. 言归正传，仍然有许多方法可以控制页面路由刷新

方法1: 定义pageInit参数并控制页面路由刷新

定义pageInit(需要定义每个需要控制的路由的meta属性)

{

path: '/PageB',

name: 'PageB',

meta: {

name: '页面B',

desc: '页面B',

pageInit: false,

},

component: PageB,

},

控制pageInit(替代路由器的push方法)

Router.prototype.pushPage = function (param) {

this.push(param)

this.currentRoute.meta.pageInit = true

}

特定页面的实现

if (this.$route.meta.pageInit) {

// 利用this.$options.data() 注意使用call()传递this指向 否则会出现undefined的情况

Object.assign(this.$data, this.$options.data.call(this))

// 调用ajax请求 初始化数据

} else {

// 页面返回 不更新数据

}

// pageInit赋值false 防止重复刷新

this.$route.meta.pageInit = false

}

通过这种方式，您可以轻松地向前和向后刷新页面而无需刷新. 有许多方法可以控制pageInit. BeforeRouteEnter和beforeRouteLeave可以更好地确定页面进入哪个页面js 后退不刷新，或者它将进入哪个页面. 设置pageInit值.

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

beforeRouteLeave(to, from, next)：离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

方法2: 动态修改includes数组(官方提供的方法)

利用keep-alive的include，打开页面时，把当前组件名加入到include数组里，退出页面时从数组中删除关闭标签的组件名就可以了

BeforeRouteEnter和beforeRouteLeave也是必需的.

方法3: 猛烈地删除缓存

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/jisuanjixue/article-150813-1.html