vueJS маршрутизатор: обновить заголовок страницы из данных компонента - PullRequest
Новая
       85

vueJS маршрутизатор: обновить заголовок страницы из данных компонента

2 голосов
/ 19 июня 2020

Я использую VueJS с установленным маршрутизатором vue, заголовки в настоящее время работают нормально, за исключением одной детали.

В приведенном ниже примере все страницы работают нормально, однако, если я использую /user/:user_id маршрут для отображения определенного c пользователя. Я не знаю, как отображать имя пользователя в заголовке, например: '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 , и переменная данных для опоры, например: 

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,
    }
 }
...

1 Ответ

1 голос
/ 19 июня 2020

Я бы просто 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;
});
...