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

Question

I used vue-cli with webpack to build up the vue project. Then I installed vue-meta-info to set up the seo.

I want to set up the Page title with the templates and the route name. However , I cannot get the variable in router.

rotuer/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>

Answer 1

You can use the router's beforeEach() helper.

Example:

routes.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 or whatever your main Javascript file is. Placing the code in one of the aforementioned JS file will allow all pages to update the title accordingly and is a much cleaner way to handle the titles.

import router from '@/routes'

// your other codes here

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

Answer 2

You need to make changes title from every component to root component, One way is by $on .... $emit ,

 const Door = { template: '<div>Door</div>', mounted: function () { vm.$emit('title', this.$route.name); } } const Bedroom = { template: '<div>Bedroom</div>', mounted: function () { vm.$emit('title', this.$route.name); } } const Kitchen = { template: '<div>Kitchen</div>', mounted: function () { vm.$emit('title', this.$route.name); } } const Hall = { template: '<div>Hall</div>', mounted: function () { vm.$emit('title', this.$route.name); } } const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Door, name:"You are in door"}, { path: '/bedroom', component: Bedroom, name:"You are in Bedroom"}, { path: '/kitchen', component: Kitchen, name:"You are in kitchen"}, { path: '/hall', component: Hall, name:"You are in hall"}, ] }) var vm = new Vue({ router, el: '#app', data: { msg: 'Hello World', title:'no title set' }, mounted: function(){ this.$on('title', function (title) { this.title = title; }) } }) 

 <script src="https://npmcdn.com/vue/dist/vue.js"></script> <script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> <div id="app"> <div>Title : {{title}}</div> <router-link to="/">Door</router-link> <router-link to="/bedroom"> | Bedroom</router-link> <router-link to="/kitchen"> | Kitchen</router-link> <router-link to="/hall"> | Hall</router-link> <router-view></router-view> </div> 

Working fiddle is

Another way is using $parent ,

 const Door = { template: '<div>Door</div>', mounted: function () { this.$parent.title = this.$route.name; } } const Bedroom = { template: '<div>Bedroom</div>', mounted: function () { this.$parent.title = this.$route.name; } } const Kitchen = { template: '<div>Kitchen</div>', mounted: function () { this.$parent.title = this.$route.name; } } const Hall = { template: '<div>Hall</div>', mounted: function () { this.$parent.title = this.$route.name; } } const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Door, name:"You are in door"}, { path: '/bedroom', component: Bedroom, name:"You are in Bedroom"}, { path: '/kitchen', component: Kitchen, name:"You are in kitchen"}, { path: '/hall', component: Hall, name:"You are in hall"}, ] }) new Vue({ router, el: '#app', data: { msg: 'Hello World', title:'no title set' } }) 

 <script src="https://npmcdn.com/vue/dist/vue.js"></script> <script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> <div id="app"> <div>Title : {{title}}</div> <router-link to="/">Door</router-link> <router-link to="/bedroom"> | Bedroom</router-link> <router-link to="/kitchen"> | Kitchen</router-link> <router-link to="/hall"> | Hall</router-link> <router-view></router-view> </div> 

Working JSFiddle