vue无卡顿刷新页面

重新刷新当前页面

1、路由重新导入当前页面（全局设置，所有页面通用）

this.$router.push({name:'goodsList',params:{vid:vid}})

但是我们会发现用vue-router在当前页面再重定向路由到页面本身，就算改变id，页面也是不进行刷新的，
因为Vue会复用相同组件, 即/page/1 => /page/2 或 /page?id=1 => /page?id=2 此类跳转, 不会执行created, mounted等钩子。

解决方法：通过给<router-view />设置一个与路由关联的动态key值，使页面进行刷新
<router-view :key="key" />

computed: {
    key () {
        return this.$route.fullPath;
    }
},

2、强制刷新（体验差）

页面会类似于ctrl+f5的那种刷新，会有一段时间的空白出现，用户体验很不好，不建议使用

location. reload()
或
this.$router.go(0)

3、provide/inject组合（局部使用，调用reload的页面可用）

1、修改App.vue，做以下修改

<template>
    <div id="app">
        <router-view v-if="isRouterAlive"></router-view>
    </div>
</template>

<script>
export default {
    provide() {
        return {
            reload: this.reload
        }
    },
    data() {
        return {
            isRouterAlive: true
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false
            this.$nextTick(function() {
                this.isRouterAlive = true
            })
        },
    }
}
</script>



2、通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了isRouterAlive来控制。
在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后

export default {
    inject: ['reload'],  //添加此行
    data(){}
}



3、通过调用 this.reload() 即可实现当前页面的快速刷新

this.reload()  //调用此函数实现刷新

实例：this.reload()配合watch监听路由变化，实现视频选集后刷新页面功能

1、用户点击选集，携带当前选中的选集id跳转当前页面的路由

2、实现方式

注路由跳转后仍在本页面，仅路由所携带id发生改变