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

Question

我已经在使用这个 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等于"/" 没关系，加载的第一页。 src/routes.js

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

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

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

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

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

非常感谢！

Answer 1

简单的方法

<template lang="html">
  <div>   
    <button @click="goBack">
      Back
    </button>
  </div>
</template>
<script>
  export default {
    methods: {
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

Answer 2

您可以执行this.$router.go(-1) 或vm.$router.go(-1) 之类的操作以获取更多信息this.$router.go(1) click here

Answer 3

当您从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 中。