时间戳

首页 > 解决方案 > Vue路由器 beforeRouteEnter - 刷新页面后，按钮名称消失

javascript - Vue路由器 beforeRouteEnter - 刷新页面后，按钮名称消失

问题描述

<script>
export default {
  name: 'TEST',
   data() {
    return {
      prevRoute: ''
    }
  },
  methods: {
    goBack() {
      return this.$router.go(-1);
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.prevRoute = from.name
      console.log(from.name)
    })
  },
}
</script>
<template> 
 <div>
  <button @click="goBack" class="back">{{ prevRoute }}</button>
 </div>
</template>

Vue 路由器 beforeRouteEnter - 刷新页面后，按钮文字 {{ prevRoute }} 消失。还有哪些其他方式可以在上一页的按钮中显示文字？

标签： javascriptvue.jsmethodsvue-routerbeforerouteenter

解决方案

这根本不可能，您的from路线在刷新时将始终为空。我能想到的最好方法是将您的路线存储from.name在您的 localStorage 中，并仅在from.name存在时设置该项目

beforeRouteEnter(to, from, next) {
    if (from.name) localStorage.setItem('from_route', from.name)
    next()
},

然后在您安装的钩子prevRoute中根据 localStorage 项设置值

mounted () {
    this.from_route = localStorage.getItem('from_route')
},

当然，如果有人与您分享链接而您不是来自任何其他页面，您将面临同样的问题。

推荐阅读