Question

我想根据我关注的链接更改我的页面标题，就像堆栈溢出的每个页面都有不同的页面标题和不同的链接一样，一些页面标题与问题标题绑定，怎么可以这样做vuejs，这对搜索引擎优化等有好处。我很喜欢vuejs，但我不明白这部分，有什么我想念的吗？

Answer 1

如果您使用 vue-router ，则可以使用 beforeEach 执行此操作：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const Router = new VueRouter({
    routes: [
        {
            path: '/path',
            component: Component,
            meta: { title: 'My Page Title' }
        }
    ]
})

Router.beforeEach((to, from, next) => {
    document.title = to.meta.title

    next()
});

Answer 2

如果有人使用Vue Webpack模板（vue init webpack projectname）：

您需要在new Vue之前将Global Guard粘贴到“ src / main.js”中：

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

new Vue({})

您可以在此处了解有关卫兵的更多信息：https://router.vuejs.org/guide/advanced/navigation-guards.html#global-guards

如何根据路线链接vuejs更改页面标题

2 个答案: