vue-meta 在页面刷新或外部链接点击时不显示标题、内容或架构

问题描述

当我通过导航栏导航到我的动态组件时，vue-Meta 标题、内容和架构都正确显示，但是当我刷新页面或单击外部链接时，我得到的值为 undefined。

我已将标题内容和架构存储在 json 文件中。

django.db.utils.NotSupportedError: Window is disallowed in the filter clause.

 MetaInfo() {
    return {
      title: `${this.SEOTitle}`,Meta: [
        {name: "robots",content: "index,follow"},{
          name: 'description',content: `${this.SEOContent}`

        }

      ],link: [
        {rel: 'favicon',href: 'logo.ico'}
      ],script: [{
        type: 'application/ld+json',json: this.markups
      }]
    }
  },

data() {
    return {
      SEOTitle: this.$route.params.title,SEOContent: this.$route.params.content,markups:this.$route.params.markup,}
}

解决方法

您应该将路由器参数存储在路由器本身或 URL 中，而不是链接中。当您单击链接时，您所做的是在内部传递对象，但正如您所注意到的，当您单击浏览器刷新按钮时，这些参数消失了。

Vue 将加载应用程序和路由器，识别哪些组件负责渲染路由并将检测到的参数从路由器传递给组件。因此，您之前链接中的任何其他数据都会丢失。

根据应用程序逻辑，尝试仅将动态参数保留在路由器中，并将其余部分加载到组件中。 IE。假设您的路线看起来像 /details/:id，您应该在您的详细信息组件中初始化 SEO 参数。

通常这些来自后端，为了更快地访问，我会将数组转换为文字对象并通过键访问记录。 IE。将数组从：

[ 
    { "id": 1008; "title": "title1","content": "....",... },{ "id": 1009,"title": "..."... } 
]

到

{
    "1008": { title: "title1",content: "....","1009": { .... }
}

然后将其存储在 VueX (https://vuex.vuejs.org/guide/getters.html) 中

getters: {
  // ...
  getBoatTour: (state) => (id) => {
    return state.boatTours[id] || { title: 'Not found',content: '......' }
  }
}

    data() {
        const SEOdata = store.getters.getBoatTour(this.$route.params.id); 
        return {
            seoTitle: SEOdata.title,seoContent: SEOdata.content,markups: SEOdata.markup,}
    }