时间戳

首页 > 解决方案 > Vue如何在视图级别自定义全局导航栏

vue.js - Vue如何在视图级别自定义全局导航栏

问题描述

我对 Vue 超级陌生。我有一个 Vue-CLI 应用程序，它有一个导航栏和内容。导航栏对所有页面都是通用的，但我想在每个页面中自定义一些额外的内容。

例子：

常见-> 首页 | 关于

查看主页 -> 主页 | 关于 | 你在家里

查看关于 -> 主页 | 关于 | 你在看

路由器/index.js 

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import NavBar from '@/components/NavBar.vue';
Vue.use(VueRouter);
Vue.component('nav-bar', NavBar);

//...

组件/导航栏.vue

 <template>
  <div>     
    <b-nav-item to="/">home</b-nav-item>
    <b-nav-item to="/about">about</b-nav-item>

    {{customContent}}
 </div>
</template>

<script>

export default {
  name: 'NavBar',
  props: {
    customContent: {
      type: String,
      default: 'default Content',
    },
  },
};
</script>

应用程序.vue

<template>
<div id="app">
  <nav-bar />
  <div class="container-fluid">
    <router-view />
  </div>
</div>
</template>

意见/home.vue 

 <template>
  <div class="row">
    <div class="col-12">
        <image-card :images="images"/>
    </div>
  </div>
</template>
<script>
//how can i customize here the navbar by adding for example 'your are in view home'???
</script>

非常感谢！

标签： vue.js

解决方案

有几种方法可以解决这个问题。我将列出其中两个。

1. 通过 $route 更新 NavBar

在这种方法中，NavBar组件已经包含所有可能的组合，并将根据$route包含的内容显示相关部分。

这是一些伪代码：

导航栏.vue

<template>
<div class="navbar">
  <div class="navbar-left>
    APPNAME
  </div>
  <div v-if="name === 'landing'">
    ...
  </div>
  <div v-else-if="name === 'room'">
    ...
  </div>
</div>
</template>

应用程序.vue

<template>
<div id="app">
  <NavBar :name="$route.name"/>
  <main>
    <router-view/>
  </main>
</div>
</template>

在这个例子中，NavBar组件是非常僵化的，并不能真正地让自己重用。但是，它确实封装了与导航栏相关的所有相关代码。

2. 带插槽的可扩展导航栏

在这种方法中，NavBar只提供了创建导航栏的最低要求。其余特定于路线的元素将由视图填充。

导航栏.vue

<template>
<div class="navbar">
  <div class="navbar-left">
    <div class="navbar-brand">
      APPNAME
    </div>
    <slot name="left"></slot>
  </div>
  <div class="navbar-right">
    <slot name="right"></slot>
  </div>
</div>
</template>

应用程序.vue

<template>
<div id="app">
  <router-view/>
</div>
</template>

登陆.vue

<template>
<div>
  <header>
    <NavBar>
      <template slot="right">
        <span>
          <div class="navbar-item">
            <div class="buttons">
              <button class="button" @click="...">Start Watching</button>
            </div>
          </div>
        </span>
      </template>
    </NavBar>
  </header>
  <main>
    ...
  </main>
</div>
</template>

NavBar这种方法在 DOM 元素方面有一些重复，但为您提供了一个可以由每个视图自定义的极其灵活的方法。

您要使用的方法取决于对您来说重要的内容。
如果您想要严格封装，那么您可能需要使用方法 1，因为所有与 -NavBar相关的代码都包含在单个文件中。但是，如果您认为有重用的潜力，或者如果您希望所有与视图相关的代码都放在一个地方，那么使用并根据每个视图slots的需要扩展它是有意义的。NavBar

推荐阅读