使用Vue-cli开发的多页面,比如博客，如何给每个页面设置title等信息？

Question

页面的数据是异步获取的，想给页面的document.title设置标题。看到网络上介绍的方式都是通过路由的全局守卫配置的。但是，在配置页面的时候都是写死了页面标题。对于从接口获取的标题数据（vuex），应该怎么配置呢？

Answer 1

export default {
    beforeMount() {
      this.allRoutes = {};
      this.$router.options.routes.forEach(route => {
          if (route.name) {
            let text = (route.meta && route.meta.text) || route.name;
            this.$set(this.allRoutes, route.name, {
                text: text,
                to: (route.meta && route.meta.to) || { name: route.name }
              }
            );
          }
        }
      );
    },
    data() {
      return {
        allRoutes: {},
        currentList: [],
      };
    },
    watch: {
      '$route'(to, from) {
        this.currentList = ((to.meta && to.meta.history).slice(0) || []);
        this.currentList.push(to.name);
      }
    },
  }

 routes: [
    {
      path: '/',
      name: 'home',
      component: require('./routes/Home.vue'),
      meta: {
        history: [],
      },
    },
    {
      path: '/projects',
      name: 'projects',
      component: () => System.import('./routes/Projects.vue'),
      meta: {
        history: ['home'],
      },
    },
    {
      path: '/project/:token',
      name: 'project',
      component: () => System.import('./routes/project/Overview.vue'),
      meta: {
        text: (vue) => vue.projects[vue.$route.params.token] || vue.$route.params.token,
        to: { name: 'project', params: { token: (vue) => vue.$route.params.token } } ,
        history: ['home', 'projects'],
    }
  ]

Answer 2

你可以在导航守卫中处理

router.beforeEach((to, from, next) => {
  // 你可以在将title定义在路由的meta中
  document.title = to.meta.title
})

vuex中获取数据

computed: {
    ...mapState({
      data: (state) => {
        // 对title 赋值
        document.title = state.title
        return state.data
      },
    })
}