Vue Router如何先跳转至/home再刷新该页面？

问题场景 #

执行logOut()完成退出登录操作后，需要跳转至/home首页并刷新该页面，但现有代码执行router.push('/home')后调用router.go()，会导致页面刷新后回到跳转前的页面：

let logOuts = () => {
    logOut();

    router.push('/home');
    router.go();
};

可行解决方案 #

方法一：替换路由历史记录+页面强制刷新 #

router.push会向浏览器历史栈新增一条记录，而router.replace会替换当前历史条目，之后执行页面刷新就不会回溯到之前的页面：

let logOuts = () => {
    logOut();

    // 替换当前历史记录，避免刷新后回到原页面
    router.replace('/home');
    // 强制刷新当前页面
    window.location.reload();
};

方法二：原生location跳转（自带刷新） #

直接使用浏览器原生的跳转方法，不需要依赖Vue Router，跳转后页面会自动刷新：

let logOuts = () => {
    logOut();

    window.location.href = '/home';
};

方法三：组件级刷新（无全局页面刷新） #

如果不想触发全局页面刷新，仅需刷新/home组件，可以通过给<router-view>绑定动态key实现：

1. 在App.vue中修改路由视图：

<router-view :key="$route.fullPath"></router-view>

2. 退出登录函数只需正常跳转，组件会自动刷新：

let logOuts = () => {
    logOut();
    router.push('/home');
};

内容的提问来源于stack exchange，提问作者Mikael Tenshio