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

【问题标题】：Vue router beforeRouteEnter - after refreshing the page, the button name disappearsVue路由器 beforeRouteEnter - 刷新页面后，按钮名称消失
【发布时间】：2021-11-07 22:33:20
【问题描述】：

<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 }} 消失。在上一页的按钮中还有哪些其他的显示方式？

【问题讨论】：

没有办法。刷新当前页面后是第一个导航路线。如果没有名称，只需输出“Back”即可。

标签： javascript vue.js methods vue-router beforerouteenter

【解决方案1】：

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

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

然后在你挂载的钩子中根据 localStorage 项设置prevRoute 值

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

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

【讨论】：