我的vue.js应用程序中有一个有趣的问题，我不知道如何解决。
我们有一个“我的列表”页面，显示用户创建的列表网格。当他们单击一个时，会将他们带到商品详情页面。它将在新的浏览器选项卡中打开此页面。
我们要做的是在页面顶部添加一个新组件，向用户显示其列表中的统计信息。但是，我们希望该组件仅在它们从“我的列表”页面进入列表详细信息页面时才显示。还有其他进入“清单详细信息”页面的方式，我们不希望当统计信息组件来自其他方式时显示它们。
我认为这可以在路由器中处理。我尝试查看是否可以通过路由器的beforeEach（...）方法中的“ from”参数检测到用户来自“我的列表”页面。我做到了：
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);
},
在“商品详情”页面上：
async created () {
this.fromMyListings = localStorage.getItem('from-my-listings') === 'true';
localStorage.setItem('from-my-listings', false);
},
只要我在使用它确定用户来自“我的列表”页面后立即将localStorage中的“来自我的列表”项设置为false，它就可以工作。这样，仅当用户来自“我的列表”页面时才设置，而如果用户来自其他地方则从不设置。
此方法的问题在于，如果用户刷新页面，则统计信息将消失。显然，这是因为created（）重新运行，并且这次“ from-my-listings”已从localStorage中删除。我可以通过不使用一次created（）将其设置为false来解决此问题，但是该在哪里删除它，无论用户如何离开页面，都可以保证将其删除（直接在其中输入新网址浏览器，关闭浏览器，计算机断电等）？
除了在create（）中仅运行一次（用户首次访问该页面时），而在随后的加载（如刷新）时，vue.js中是否还有其他钩子？有没有一种方法可以根据本地存储的状态将道具传递到路由器中的组件，而不必在刷新时再次传递它？这个问题可能还有什么其他解决方案？
您可以使用查询参数。您必须将链接更改为如下所示：
yourapp.com/listing-detail/333?from=list
然后在created功能中，您可以检查window.location.search的from值