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

Posted 2023-02-22

【中文标题】我在 vuejs 单页应用程序上刷新页面

【英文标题】：I have page refreshing on vuejs single page app

【发布时间】：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。