带有后退按钮的 Vue.js 路由

我已经使用了这个 Vue.js 路由示例应用程序。

 https://github.com/chrisvfritz/vue-2.0-simple-routing-example

在 src/main.js 我有这么多的数据价值。

 const app = new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname,
    token : "",
    errorMessage : '', etc...etc..
  },

现在使用socket.io，我将令牌设置为 "sdawdda2d2ada2ad22ad"

当应用程序启动比 currentRoute 等于 "/" 它的 okey，加载的第一页。 src/routes.js

 '/': 'Home',
'/about': 'About'

当我想检查 /about (url: localhost:8080/about ) 时，它的效果很好，但令牌和 errorMessage 再次为空，因为应用程序再次创建。

如果我想在不丢失令牌值的情况下更改页面，我可以使用：

 this.currentRoute = "/about"       (url: localhost:8080)

它工作得很好，但网址没有改变，所以我不能在浏览器中使用后退按钮。如果我不想在浏览器转到 /about 时丢失令牌值，我该如何分离我的 Vue 应用程序？

非常感谢！

原文由 ketom 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 474

当您从 Home 路线移动到 About 路线时，您需要使用 <router-link> 进行导航。

从您的 home 页面，您可以导航到 about 页面，如下所示：

 <router-link to="/about">Go to my About Page</router-link>

这会生成一个常规的 html 锚标签 <a> 并且路径设置正确。当您单击它时，它将带您到 about 组件，而不是从服务器刷新整个 html 网页（带有应用程序脚本）。

当仅更改路由组件时，Vue 实例上的所有其他 Vue 参数（如令牌）将保留。

请在此处查看 vue-router ： http ://router.vuejs.org/en/essentials/getting-started.html

请记住在您的主应用程序中为路由设置一个占位符，如下所示： <router-view></router-view> 。当您更改路线时，您的 Home 和 About 组件将被渲染到这个 router-view 中。

原文由 Mani 发布，翻译遵循 CC BY-SA 3.0 许可协议