元标记不适用于Vue-router

Question

我使用的是webpack的Vue模板：vue init webpack router-app

在“router-app/src/router/index.js”中设置元标题：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '*',
      component: NotFoundComponent
    },
    {
      path: '/',
      name: 'LoginPage',
      meta: { title: 'Home', bodyClass: 'dashboard' },
      component: LoginPage
    }
  ]
})

LoginPage.vue：

<template>
  <form>
  ...
  </form>
</template>

<script>
export default {
  name: 'LoginPage',
  data () {
    return {
      msg: 'Login Page'
    }
  }
}
</script>

但这根本不会影响我的元标题。在vue dev-tools (Chrome)中，我可以看到$route有我的meta标签。

Answer 1

如果您没有包含导航卫士，这里有一篇很棒的文章here中的函数。而且它工作得很好。

如果你只需要改变标题，你可以这样做

meta: {
  title: 'About Page - Example App'
}

将此内容插入route.js或(如果不是app.js)

 router.beforeEach((to, from, next) => {

    const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);

    if (nearestWithTitle) document.title = nearestWithTitle.meta.title;

    next();
});

如果您需要更改元标记的名称和其他名称，那么为了灵活性，您需要完整的函数

router.beforeEach((to, from, next) => {

    const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);

    const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
    const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);

    if (nearestWithTitle) document.title = nearestWithTitle.meta.title;

    Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));

    if (!nearestWithMeta) return next();

    nearestWithMeta.meta.metaTags.map(tagDef => {
            const tag = document.createElement('meta');

            Object.keys(tagDef).forEach(key => {
                tag.setAttribute(key, tagDef[key]);
            });

            tag.setAttribute('data-vue-router-controlled', '');

            return tag;
        })
        .forEach(tag => document.head.appendChild(tag));

    next();
});