vue.js는 App에서 루트 이름을 가져옵니다.표시하다

vue.js는 App에서 루트 이름을 가져옵니다.표시하다

웹 팩과 함께 vue-cli를 사용하여 vue 프로젝트를 구축했습니다.그리고 vue-meta-info를 설치하여 seo를 셋업했습니다.

템플릿과 루트명으로 페이지 제목을 설정하고 싶습니다.단, 라우터에서 변수를 가져올 수 없습니다.

로터/인덱스.삭제

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()헬퍼

예:

routes.displaces

import Foo from '@/components/Foo'

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

인app.js또는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()
})

모든 컴포넌트에서 루트 컴포넌트로 제목을 변경해야 합니다.한 가지 방법은$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>

바이올린을 켜는 것은

또 다른 방법은$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>

작업 중인 JSFiddle

언급URL : https://stackoverflow.com/questions/49685780/vue-js-get-route-name-in-app-vue