Vue.js 如何使用Vue路由器高效地渲染不同的导航条？

因此，我正在使用Vue和Vue路由器创建一个相对较大的网站，不同的页面需要不同的导航栏（每个自定义组件呈现在页面顶部）（有些页面根本没有导航栏），目前我使用的格式与此类似：

<template>
    <div>
        <div v-if="firstNavbar">
            <FirstNav />
        <div>
        <div v-if="secondNavbar">
            <SecondNav />
        </div>
       <router-view />
    </div>
</template>

但是仅仅因为导航栏发生了变化就为每个路由事件重新呈现整个页面似乎有点低效，我想知道我能做些什么来补救这个问题

---

非常感谢您的帮助。

我建议使用

元素缓存导航栏。试试这个

APP.vue

从“/firstNavbar.vue”导入firstNavbar；
从“./secondNavbar.vue”导入secondNavbar；
导出默认值{
组成部分：{
第一导航栏，
第二导航条
},
计算：{
getConditionallyRenderedNavbar（）{
返回第一导航//或第二导航或无导航
}
}
}

v-if不应导致整个页面重新呈现。。。为什么首先要使用路由事件来更改单个组件？你需要历史还是什么？@Brychowitson我只是需要不同页面的不同导航栏，但对于很多页面，它是相同的导航栏，老实说，我相信有一种更有效的方法，比让同一个组件在不同页面的同一位置使用相同的精确数据进行重新招标更有效。是的，不要将其放在目标页面，将导航放在app.vue模板中。然后只更改页面内容，而不更改nav@BryceHowitson对，我的意思是，我已经在做了，除了当我想改变导航栏时我该怎么做？你所做的看起来是正确的。如果该代码在app.vue中，则路由器更改不会重新呈现nav。Vue仅重新发布更改的内容。在这种情况下，

路由器视图中的内容

。如果您仍然担心性能，可以使用

v-show

而不是

v-If

。Show将组件保留在DOM中，只是更改可见性。谢谢，这似乎就是我要找的！如果我理解正确的话，最好的办法是继续观察路由更改，然后在

getConditionallyRenderedNavbar（）

中设置一个条件，对吗？是的。这是一条路要走。您提到在整个过程中使用的特定navbar比您可以使用的其他navbar更多（）{return{navbarSelected:'navbar….'}}您的组件元素现在将是

，在这种情况下，您将不再需要computed属性。您可以监视路由更改并设置一个条件，使用很少使用的导航栏的其他路由将更改

this.navbarSelected

的值。您可以检查是否有更具可读性的方法。此外，如果您不介意，您可以选择满足您需要的答案。：）