vue.js 获取 App.vue 中的路由名称

我使用 vue-cli 和 webpack 来构建 vue 项目。 然后我安装了 vue-meta-info 来设置 seo。

我想使用模板和路线名称设置页面标题。 但是，我无法获取路由器中的变量。

路由器/index.js

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';

Vue.use(Router);

export default new Router({
      mode: 'history',
      routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
  ],
});

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
 name: 'App',
 metaInfo: {
    title: "My Website - "+ route.name,
},
};

</script>

您可以使用路由器的beforeEach() helper.

Example:

路线.js

import Foo from '@/components/Foo'

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Foo',
      component: Foo,
      meta: {
        title: 'Foo'
      }
    }
  ]
})

In app.js or main.js或者无论你的主要 Javascript 文件是什么。将代码放置在上述 JS 文件之一中将允许所有页面相应地更新标题，并且是一种更简洁的处理标题的方法。

import router from '@/routes'

// your other codes here

router.beforeEach((to, from, next) => {
  document.title = `My website - ${to.meta.title}`
  next()
})