元标签不适用于 Vue-router

Question

我正在使用 Vue webpack 模板：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
    }
  ]
})

登录页面.vue：

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

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

但这根本不影响我的元标题。在 vue 开发工具（Chrome）中，我可以看到它$route有我的元标签。

Answer 1

如果您没有包含导航防护，这里有一篇精彩文章中的功能。而且它工作正常。

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

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