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

Question

我正在运行安装了 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,
    }
 }
...

Answer 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;
});