在使用 nuxt-link 转到新页面之前存储 url答案

【问题标题】：storing url before going to new page with nuxt-link在使用 nuxt-link 转到新页面之前存储 url
【发布时间】：2021-06-25 03:10:01
【问题描述】：

我想在浏览器的主页/main 上存储我的网址，然后再使用nuxt-link 转到另一个页面。这是我的nuxt-link：

<NuxtLink
  :to="`/search?param={number}`"
  @click.native="assignAddress"
>
  SEARCH
</NuxtLink>

这就是点击nuxt-link触发的方法：

assignAddress() {
  localStorage.setItem("address", `${this.$route.path}`);
},

问题在于它将/search 保存在浏览器中。我认为发生的是方法assignAddress在nuxt更改页面后被触发！

如何先将 url 存储在浏览器中，然后更改页面，以便在浏览器中存储 /main 而不是 /search？

【问题讨论】：

这样做的最终目标是什么？您可能不需要存储它，特别是如果它要返回到上一页或类似页面。

标签： javascript vue.js url nuxt.js nuxt-link

【解决方案1】：

如上所述，您确实可以使用一些路由器防护。
我确实更喜欢使用beforeRouteEnter 而不是beforeRouteLeave，因为我觉得如果我的目标组件正确安装，resolution flow 可能不太容易出错，因此在组件转换期间不会出现错误。

这是代码方面的样子

/pages/search-page.vue

<template>
  <div>This is the search page</div>
</template>

<script>
export default {
  name: 'SearchPage',
  beforeRouteEnter(to, from, next) {
    console.log('came from', from)
    localStorage.setItem('address', from.path)
    next()
  },
}
</script>

【讨论】：

【解决方案2】：

@seyet 你试试在beforeRouteLeave 导航守卫中设置它怎么样。

beforeRouteLeave(to, from, next) {
  // called when the route that renders this component is about to
  // be navigated away from.
  // has access to `this` component instance.
}

找到的文档链接here

完成后请务必致电next()。

【讨论】：