如何根据路由链接vuejs更改页面标题答案

【问题标题】：how to change page title according to route links vuejs如何根据路由链接vuejs更改页面标题
【发布时间】：2018-01-09 18:55:12
【问题描述】：

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

【问题讨论】：

你在做客户端导航（即使用VueRouter）吗？
我正在使用 vue-meta 来执行此操作，效果很好 github.com/declandewet/vue-meta
你在使用 SSR 吗？我在标签中看到 laravel，但这似乎是一个纯 vuejs 问题
@Antony 我想他只是把所有的筹码都放了。
如果您希望您的标题具有反应性，请查看How can I bind the html <title> content in vuejs?。

标签： laravel vue.js vuejs2 laravel-5.4

【解决方案1】：

如果有人使用 Vue webpack 模板 (vue init webpack projectname)：

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

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

new Vue({})

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

【讨论】：

标题内容有变化。但是如果我右键单击该网站并选择查看页面源，我会看到标题、描述和关键字没有改变

【解决方案2】：

如果你使用的是 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()
});

【讨论】：

标题内容有变化。但是如果我右键单击该网站并选择查看页面源，我会看到标题、描述和关键字没有改变