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) 时，效果很好，但令牌和错误消息再次为空，因为应用程序再次创建。

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

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

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

非常感谢！

Answer 1

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

Answer 2

你可以做 this.$router.go(-1) 或 vm.$router.go(-1) 之类的事情来前进 this.$router.go(1) 更多 click here

Answer 3

简单的方法

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

Vue.js 带后退按钮的路由

Vue.js Routing with back button

javascript

vue.js

vue-router