我在 vuejs 单页应用程序上刷新页面答案

【问题标题】：I have page refreshing on vuejs single page app我在 vuejs 单页应用程序上刷新页面
【发布时间】：2017-10-21 00:50:16
【问题描述】：

我在 vuejs 上构建了单页应用程序，我有下一个情况：

我正在使用 vue-router 和 vue-resource。导航菜单正常工作。当我单击菜单中的链接时，部分页面会更改而无需刷新页面。但是当我试图在另一个页面上使用重定向时......

this.$router.go('/about');

...整个应用程序刷新。

如何在不刷新页面的情况下更改网址？

附：我也尝试使用：

window.location.href = "/about";

但结果是一样的。

谢谢！

【问题讨论】：

【解决方案1】：

尝试使用

this.$router.push('/about');

$router.go(n) 接受一个整数，表示在历史堆栈中前进或后退的步数，类似于window.history.go(n)

这就是你的页面被刷新的原因

你可以看到更多关于程序化导航here

【讨论】：

【解决方案2】：

大多数情况下，您将在单页应用程序的导航菜单中使用<router-link :to="/about">。 Vue API 中类似的方法是 router.push('/about') 。这是单击导航按钮时内部调用的方法。

模板

<button @click="goToAbout()">About</button>

脚本

methods: {
          goToAbout: function () {
            this.$router.push('/about')
          },
}

您在这里使用this.$router.go('/about'); 是错误的，因为它用于在浏览器的历史堆栈中向后导航。此 API 只需要一个整数，即步数。

如果你使用 `window.location.href = "/about" ，它纯粹是一个高级浏览器功能，超越了 VUE spa。

【讨论】：