Question

如果可能的话，我想在路线定义中指定标题。通常在<head><title>中指定并显示在浏览器标题栏中的内容。

我的项目设置如下：

main.js

import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VeeValidate);
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills,
      meta: { title: 'Skills - MyApp' } // <- I would to use this one
    },
    {
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About,
      meta: { title: 'About - MyApp' }
    }
  ]
})

最好，我想要一个自动系统，而不是在每个组件的已创建函数上更改页面标题。谢谢。

Answer 1

您可以将导航卫士与路由器定义一起使用：

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
    document.title = to.meta.title || DEFAULT_TITLE;
});

您需要将导出更改为：

const router = new Router({ ... });
...
export default router;

或者您可以在根组件上使用监视程序：

export default {
    name: 'App',
    watch: {
        $route(to, from) {
            document.title = to.meta.title || 'Some Default Title';
        },
    }
};

Answer 2

这是我找到的最佳解决方案，它可以工作。

computed: {
    pageTitle: function() {
        return this.$route.meta.title;
    }
}

Answer 3

我想补充一点，以上内容并未真正保留历史记录。请参见https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609，以获得一个更好的答案，它实际上可以处理历史记录（尽管有些古怪）。

Answer 4

实际上，根据我对Steven B.的解决方案的实验，我提出了一些更好的方法。事情是这样

watch: {
    $route(to, from) {
        document.title = to.meta.title || 'Some Default Title';
    },
}

最初访问页面时（通过浏览器的地址栏导航），

不起作用。相反，我们可以这样创建一个吸气剂：

computed: {
    pageTitle: function() {
        return this.$route.meta.title;
    }
}

现在，在我的情况下，我希望设置“模板”的标头（这样子路由就不会打扰它了）。对于您的情况，您可能想知道一旦具有计算属性，如何设置文档标题，并且有some ways。根据这些答案，您甚至可以执行以下操作：

created () {
    document.title = this.$route.meta.title;
}

但是我会在用于生产之前重新测试同一页面（不确定是否每次创建组件）的情况进行测试。

Answer 5

我发现此解决方案正在使用mixins，并且需要最少的代码。

https://medium.com/@Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863，最初是https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/util/title.js

我喜欢它，因为您可以在视图组件中而不是在路线中定义标题：

在src / mixins目录中，创建一个名为 titleMixin.js 的新文件，内容如下。它正在检查组件的'title'属性的值是变量还是函数，并返回 title 变量的值或 title（）的返回值功能。

function getTitle (vm) {
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}export default {
  created () {
    const title = getTitle(this)
    if (title) {
      document.title = title
    }
  }
}

在您的 main.js 中全局注册mixin。在创建Vue实例之前添加以下内容：

import titleMixin from './mixins/titleMixin'

Vue.mixin(titleMixin)

最后，在视图组件文件（例如Home.vue）中，使用名为 title 的属性来定义页面的标题。

export default {
  name: 'Home',
  title: 'Homepage Title',
  components: {
    ...
  }
}

一个小缺陷：mixin是全局注册的，这使得mixin可用于所有组件，甚至适用于没有意义的 non view 组件。

Answer 6

高级版本

使用vue-meta

第一次运行 npm install vue-meta

并将其包含到您的 main.js ;

import VueMeta from 'vue-meta'
Vue.use(VueMeta)

这样做之后，您可以向每个vue组件添加metaInfo()方法，以处理元数据；

metaInfo() {
        return { 
            title: "Epiloge - Build your network in your field of interest",
            meta: [
                { name: 'description', content:  'Epiloge is about connecting in your field of interest. Our vision is to help people share their knowledge, work, projects, papers and ideas and build their network through what they do rather where they live, study or work.'},
                { property: 'og:title', content: "Epiloge - Build your network in your field of interest"},
                { property: 'og:site_name', content: 'Epiloge'},
                {property: 'og:type', content: 'website'},    
                {name: 'robots', content: 'index,follow'} 
            ]
        }
    }

此外，它可以用于动态元信息;

export default{
    name: 'SingleUser',
    data(){
        return{
            userData: {},
            ...
            aws_url: process.env.AWS_URL,
        }
    },  
    metaInfo() {
        return {
            title: `${this.userData.name} - Epiloge`,
            meta: [
                { name: 'description', content: 'Connect and follow ' + this.userData.name + ' on Epiloge - ' + this.userData.tagline},
                { property: 'og:title', content: this.userData.name + ' - Epiloge'},
                { property: 'og:site_name', content: 'Epiloge'},
                { property: 'og:description', content: 'Connect and follow ' + this.userData.name + ' on Epiloge - ' + this.userData.tagline},
                {property: 'og:type', content: 'profile'},
                {property: 'og:url', content: 'https://epiloge.com/@' + this.userData.username},
                {property: 'og:image', content: this.aws_url + '/users/' + this.userData.profileurl + '-main.jpg' }    
            ]
        }
    },
    ...
}

来源：Medium - How to add dynamic meta-tags to your Vue.js app for Google SEO

使用vue-router时如何更改页面标题？

6 个答案:

高级版本

使用vue-meta