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

How do I detect the page the user came from in vue.js when the page opens in a new tab?

我的 vue.js 应用程序遇到了一个有趣的问题,但我不知道如何解决它。

我们有一个 "my listings" 页面,其中显示了用户创建的列表列表。当他们点击其中一个时,他们会转到列表详细信息页面。它会在新的浏览器选项卡中打开此页面。

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

我认为这可以在路由器中处理。我尝试查看是否可以检测到用户来自路由器的 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 中的 'from-my-listings' 项设置为 false,它就可以工作。这样,只有当用户来自“我的列表”页面时才会设置,如果用户来自其他任何地方则永远不会设置。

这种方法的问题在于,如果用户刷新页面,统计信息就会消失。显然,这是因为 created() 重新运行并且这次 'from-my-listings' 从 localStorage 中删除。我可以通过在使用后不在 created() 中将其设置为 false 来解决此问题,但是我在哪里删除它,无论用户如何离开页面(输入新的 url 直接在浏览器中,关闭浏览器,电脑断电等)?

除了 created() 之外,vue.js 中是否还有一些其他挂钩只运行一次(当用户首次访问页面时),但不会在后续加载(如刷新)时运行?有没有办法根据 localStorage 的状态将道具传递给路由器中的组件,而不必在刷新时再次传递?这个问题还有哪些其他解决方案?

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

yourapp.com/listing-detail/333?from=list

然后在 created 函数中,您可以检查 window.location.searchfrom