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

Posted 2023-02-22

【中文标题】vue.js 在 App.vue 中获取路由名称

【英文标题】：vue.js get route name in App.vue

【发布时间】：2018-09-16 01:38:06

【问题描述】：

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

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

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>

【参考方案1】：

您可以使用路由器的beforeEach() 助手。

例子：

routes.js

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

【参考方案2】：

您需要将每个组件的标题更改为根组件，一种方法是$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

另一种方法是使用$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