vue项目如何实现导航栏中的前进和后退都要刷新页面？

Question

vue项目如何实现导航栏中的前进和后退都要刷新页面？

现在前进和后退页面并没有重新加载

Answer 1

没刷新是因为只有 query 变了，解决办法是：

<template>
    <el-container class="full-height">
        <el-header class="header-style">
            <Header/>
        </el-header>
        <el-container>
            <el-aside class="aside-width">
                <Menu/>
            </el-aside>
            <el-main class="main-container">
                //  通过 isReloadInstance 让视图重新渲染
                <router-view v-if="!isReloadInstance"/>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import Menu from './base-model/menu';
import Header from './base-model/header';

export default {
    data() {
        return {
            isReloadInstance: false
        };
    },
    components: {
        Menu,
        Header
    },
    mounted() {
        window.addEventListener('popstate', (e)=>{
            this.isReloadInstance = true;
            this.$nextTick(() => {
                this.isReloadInstance = false;
            });
        }, false);
    }

};

Answer 2

前进后退如果路由改变了肯定是会刷新页面的，除非你的页面用了keep-clive或者跳转的是同一个路由