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

Question

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

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

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

...整个应用程序令人耳目一新。

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

P.S。我也尝试使用：

window.location.href = "/about";

但它有相同的结果。

谢谢！

Answer 1

尝试使用

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

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

这就是你的网页被重新粉饰的原因

您可以详细了解程序导航here

Answer 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。