vueJS 路由器：从组件数据更新页面标题

Posted 2023-02-23

【中文标题】vueJS 路由器：从组件数据更新页面标题

【英文标题】：vueJS router: Update page title from component data

【发布时间】：2020-10-09 18:06:08

【问题描述】：

我正在运行安装了 vue 路由器的 VueJS，除了一个细节之外，标题目前工作正常。

在下面的示例中，所有页面都可以正常工作，但是如果我使用 /user/:user_id 路由显示特定用户，我不知道如何在标题中显示用户名，例如：'Cool Page - [USER_NAME]'。

这个用户名是在组件使用:user_id从Vuex中检索该用户数据后，在组件中从数据库中获取的。

我该怎么做？

routes: [
  
      path: '/',
      name: 'Home',
      component: Home,
      meta: 'title': "Cool Page",
        'metaTags': metaTags,
    ,
    
      path: '/users',
      name: 'users',
      component: Users,
      meta: 'title': "CoolPage - Users",
        metaTags: metaTags,
    ,
     
      path: '/user/:user_id',
      name: 'user',
      component: User,
      meta: 'title': "Cool Page - Some User",
        metaTags: metaTags ,
...

const DEFAULT_TITLE = 'Coolpage.com';
router.afterEach((to, from) => 
    document.title = to.meta.title || DEFAULT_TITLE;
);

在我的组件中： 我有一个使用 vuex getter 的计算属性，以及一个用于 prop 的数据变量，如下所示：

computed: 
    ...mapGetters(['allUsers','getUserById', 'getUserStoreStatus']),
    user: function () 
      var u = this.getUserById(this.user_id);
      if(u) return u; 
      else return ; 
    ,
,
data()
    return 
      user_id: this.$route.params.user_id,
    
 
...

【问题讨论】：

在你的组件中获取数据后更新标题？

@ZedHome 在 created() 中类似于window.document.title = "CoolPage - "+this.user.name;？在那一点上更改标题会损害 SEO 吗？

@Nelo 你能发布一下你是如何从你的 Vuex 商店获取数据的吗？

@maxshuty 我将抓取添加到帖子中

【参考方案1】：

我会简单地import你的商店来获取用户信息，就像这样：

import store from '../store';

然后你会做这样的事情（我没有看到你的商店代码，所以你必须改变这个位以满足你的需要）：

const DEFAULT_TITLE = 'Coolpage.com';
router.afterEach((to, from) => 
    const userInfo = store.getters['getUserInfo'];
    // This could be cleaned up a bit, but you get the point...
    document.title = to.name === 'user' ? 
        `Cool Page - $userInfo.username` : 
        to.meta.title || DEFAULT_TITLE;
);

【讨论】：

这似乎在我的开发服务器中工作，我不知道我可以在我的 router.js 文件中使用商店。我会将我的代码发布到上面的问题中，并在我在暂存时运行它时通知您。