Vue.js如何实现整页重定向？SPA跳转按钮残留问题

问题原因 #

你当前用this.$router.push('/home')是Vue Router的SPA内部路由切换，只会更新<router-view>中的内容，而按钮放在根组件（App.vue）的<router-view>外部，所以切换路由后按钮依然保留在页面上。要实现整页重定向（即整个页面刷新跳转，完全替换当前页面内容），需要使用原生浏览器的跳转方法。

具体实现方法 #

修改按钮点击方法，替换为原生JS的页面跳转方式：

方法1：普通跳转（支持浏览器回退） #

foobar() {
  window.location.href = '/home';
}

方法2：替换历史记录（不支持回退到当前页） #

如果不想让用户回退到当前页面，可以使用replace：

foobar() {
  window.location.replace('/home');
}

补充：SPA内部实现“无按钮”页面的替代方案 #

如果你只是想在SPA内部切换页面后隐藏按钮，而非真正整页刷新，可以调整路由结构：

• 将按钮移到单独的路由组件中（比如一个首页组件）
• 配置路由时，让首页组件对应根路径/，Home组件对应/home
• 此时用this.$router.push('/home')切换时，首页组件（包含按钮）会被替换成Home组件，按钮自然消失

示例路由配置修改：

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            component: () => import('./components/ButtonPage.vue') // 包含按钮的页面
        },
        {
            path: "/home",
            component: Home
        }
    ]
});

内容的提问来源于stack exchange，提问作者Dr Schizo