无涯教程网

Vue.js Vue + Vuetify + vuerouter：根据页面更改工具栏内容

发布于02月05日

Vuetify有一个非常灵活的布局方案，包括菜单、工具栏、内容和页脚，允许一些好看的material design schemes，例如Google Contacts:

考虑一个标准的设置，由路由控制的布局，在整个站点上有一个固定的菜单，但是一个动态的工具栏随着页面的显示而改变.根据显示的页面更改工具栏内容的最佳实践是什么？在谷歌联系人的例子中，我们只希望搜索栏显示在Contacts页上.

基于我对Vue的基本知识，它似乎定义了一个路由布局与scoped slot.可能还有很多其他的黑客方法来实现这一点.但我正在寻找一种干净、模块化的方式来跨页面定义工具栏内容.

思想:

不久前，vue路由didn't support named slots.但这似乎有changed recently个，尽管没有文档.
Named views似乎是一个很好的方式来支持将工具栏内容绑定到vue路由的主页.但是，对于工具栏来说，似乎没有一种与主页"对话"的好方法，就像使用插槽一样.

推荐答案

您可以在应用程序中定义多个路由视图.想象一下，您的布局看起来非常简单，如下所示:

<v-app id="app">
  <router-view name="navigation"></router-view>
  <router-view></router-view>
</v-app>

然后，您可以为两个路由视图定义包含组件的路由:

{
  path: '/hello',
  components: {
    default: MyHelloComponent,
    navigation: MyNavigationForHelloComponent
  }
}

Working Example from Documentation

Vue.js相关问答推荐

Vue.js编译的render函数不起作用

可组合数据获取示例

如何使用 vueJS 上的 ref( ) 函数创建二维数组定义？

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

绑定事件在渲染函数中不起作用

处理多张卡片中的按钮

单击 v-data-table 中行中的任意位置并移动到另一个页面

用 axios 搜索：新字符时取消之前的请求

v-on：submit.prevent 不停止表单提交

SVG 加载 vue-svg-loader； [Vue 警告]：无效的组件定义

如何使用 Vuejs 和 Laravel 获取当前经过身份验证的用户 ID？

如何使用 TypeScript 在 Vue.js 中指定非react性实例属性？

如何将项目推送到 Vuejs 中数据对象的数组中？ Vue 似乎没有关注 .push() 方法

动态更改我的 Vue.js SPA 主题的最佳方式？

mount() 仅在组件 Vue.js 上运行一次

Vue v-model 不响应 BS4 单选按钮组

如何在 Vue 数据对象中运行函数？

v-bind：class 的 Vue.js 计算(computed)属性

如何订阅store 模块

理解 Vue 中的this关键字

实用课程推荐

相关教程推荐