如何在 Vue 路由器中定义要在组件内部使用的变量？

Question

我在顶部有一个导航栏，在<router-view>其右下方有一个导航栏（如 中所示App.vue）。我希望导航栏中的标题根据我所在的路线/视图而改变。由于我的视图<router-view>不包含标题本身，因此我需要在某处定义它们。该场景的一个示例是，当到达路线时/login，导航栏中的标题更改为“登录”。我该如何实现这一目标？

在寻找解决方案时，我遇到了很多页面标题问题。我不是在谈论document.title作业，但是，这可能是一种解决方案，但不是一个完美的解决方案。如果我希望标题不是文档标题，该怎么办？

应用程序.vue：

<template>
  <Menu :isActive="isMenuActive" />
  <Navbar @toggle:hamburger="onHamburgerToggle($event)" />
  <router-view />
</template>

Answer 1

Vue 路由器允许您使用路由元字段将任何您想要的信息附加到任何路由

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { title: "FOO" }
    }      
  ]
})

您可以使用变量访问任何组件中当前活动路由的信息$route

const child = Vue.component('child', {
  template: `
  <div>
    Child component ("{{ $route.meta.title }}")
  </div>
  `
})

const router = new VueRouter({
  mode: 'history',  
  routes: [
    {
      name: 'route1',
      path: '/route1',
      component: child,
      meta: { title: 'Hello from route 1!'}
    },    
    {
      name: 'route2',
      path: '/route2',
      component: child,
      meta: { title: 'Hello from route 2!'}
    },    
  ]
})

new Vue({
  el: '#app',
  router,
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-link to="/route1">Route 1</router-link>
  <router-link to="/route2">Route 2</router-link>
  
  <h4> Current route: {{ $route.meta.title }} </h4>

  <router-view></router-view>
</div>