元标记不适用于 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
    }
  ]
})

LoginPage.vue:

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

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

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

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

元标记不适用于 Vue-router

Meta tags doesn't work with Vue-router

vue.js

vue-router