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

Posted 2023-02-22

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

【英文标题】：How to define variables in Vue router to be used inside components?

【发布时间】：2021-06-04 21:58:42

【问题描述】：

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

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

App.vue：

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

【参考方案1】：

每个组件都可以访问$route 对象，因此您可以直接在模板中使用它。或者，您可以在脚本中访问该对象并对其进行处理。

假设您的路线具有name 属性：

路由器/index.js

routes: [
   path: '/', name: 'home', component: Home ,
   path: '/foo', name: 'foo', component: Foo ,
   path: '/bar', name: 'bar', component: Bar 
]

您可以在模板中显示该名称而无需脚本：

Navbar.vue

<template>
  <div>Title:  $route.name </div>
</template>

^{（meta 也是一个好主意，如 @MichalLevý 的 answer 中所述。）}

或者您可以访问脚本中的路由对象并根据需要创建标题。

Navbar.vue（组合 API）

<template>
  <div>Title:  title </div>
</template>

<script>
import  ref  from 'vue';
import  useRoute  from 'vue-router';

export default 
  setup() 
    const route = useRoute();
    const title = ref('My title ' /* Do something with `route` */);
    return  title 
  

</script>

【讨论】：

我发现这样做是个好主意：const title = computed(() => route.meta.title || 'default title'); - 这样它会在标题更改时更新。也许可以在路由器中设置默认值，但是您必须将其分配给每个路由..

很高兴为没有meta 的路由提供回退。如果您只是使用meta，则不需要使用计算脚本或任何脚本。您可以将其直接放入模板中： $route.meta.title || 'default title'

你是对的。不需要额外的步骤。在我的项目中，我有两个标题，具体取决于标题，它改变了位置:)

这是 Michal 的建议，所以如果您不需要对组件进行任何修改，我建议您接受他的回答

【参考方案2】：

Vue 路由器允许您使用 Route Meta Fields 将您想要的任何信息附加到任何路由

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

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

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>