当页面在新选项卡中打开时，如何在vue.js中检测用户来自的页面？

我的vue.js应用程序中有一个有趣的问题，我不知道如何解决它

我们有一个“我的列表”页面，显示用户创建的列表网格。当他们点击其中一个时，它会将他们带到列表详细信息页面。它将在新的浏览器选项卡中打开此页

我们要做的是在页面顶部添加一个新组件，向用户显示其列表上的统计信息。但我们希望该组件仅在从“我的清单”页面转到“清单详细信息”页面时显示。还有其他方法可以访问列表详细信息页面，我们不希望stats组件从这些其他方法中显示出来

我认为这可以在路由器中处理。我试图通过路由器beforeach（…）方法中的“from”参数来检测用户是否来自MyListings页面。我这样做：

router.beforeEach(async (to, from, next) => {
    console.log('from=', from);
    console.log('to=', to);
});

当它打印from参数时，我得到：

to= {
fullPath: "/"
hash: ""
matched: []
meta: {}
name: null
params: {}
path: "/"
query: {}
}

它不包含有关它来自何处的信息。我猜这是因为它在一个新选项卡中打开了列表详细信息页面。所以我不能用路由器来判断用户来自哪里

相反，我求助于使用localStorage：

在“我的列表”页面上：

<v-btn :href="`/listings/${listing.listingId}`" target="_blank" @click="saveFromMyListings();">View Listing</v-btn>

...

saveFromMyListings() {
  localStorage.setItem('from-my-listings', true);
},

只要在使用localStorage中的“从我的清单”项确定用户来自我的清单页面后立即将其设置为false，它就可以工作。这样，仅当用户来自My Listings页面时才设置，而当用户来自其他任何地方时从不设置

这种方法的问题是，如果用户刷新页面，统计信息就会消失。显然，这是因为created（）会重新运行，而这次“来自我的列表”将从本地存储中删除。我可以通过在使用后不在created（）中将其设置为false来修复此问题，但我在何处删除它，以确保无论用户如何离开页面（直接在浏览器中输入新url、关闭浏览器、计算机断电等）都可以删除它

---

除了created（）之外，vue.js中是否还有其他钩子只运行一次（当用户第一次访问页面时），但不会在后续加载（如刷新）中运行？是否有一种方法可以根据本地存储的状态将道具传递给路由器中的组件，而在刷新时不必再次传递道具？这个问题还有什么其他解决方案？

您可以使用查询参数。您必须将链接更改为以下内容：

yourapp.com/listing detail/333？from=list

---

然后，在创建的

功能中，您可以检查
窗口.位置.搜索
中的
from
值
Brodcastchannel以从一个来源同步多个选项卡，polyfill与localstorage
async created () {
    this.fromMyListings = localStorage.getItem('from-my-listings') === 'true';
    localStorage.setItem('from-my-listings', false);
},