Javascript Vue路由器通用导航栏搜索

Vue和前端开发人员一般都是新手

我试图在Vue路由器中使用bootstrap Vue制作一个通用导航栏，并实现一个搜索栏

但是，由于我将导航栏放在App.vue中，因此无法将搜索功能传递到特定路线

以下是我的App.vue中的内容

  <div id="app" >
    <b-navbar toggleable="lg" variant="light" type="light" class="justify-content-between">
      <b-navbar-brand><router-link to="/">Brand</router-link></b-navbar-brand>
      <b-collapse class="nav-collapse" is-nav>
        <b-nav-item><router-link to="/about">Route 1</router-link></b-nav-item>
      </b-collapse>

      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input class="form-control mr-sm-2" v-model="search_term" placeholder="Search..."></b-form-input>
          <b-button variant="outline-success my-2 my-sm-2" type="submit" v-on:click="getSearch(search_term)">Search</b-button>
        </b-nav-form>
      </b-navbar-nav>
    </b-navbar>

    <router-view/>

  </div>
</template>

<script>

</script>

<style>


</style>

烙印
一号干线
搜寻

路由器函数在它自己的类中

正如您所看到的，我在b-nav-form下实现的搜索内容是在navbar位于实现函数的特定页面时实现的

但是，由于单个页面中有导航栏，因此每次用户重新路由时都必须重新呈现导航栏。所以我把它放在App.vue页面中，在那里它被永久呈现

---

当导航栏是通用的时，如何将搜索项传递到其特定页面中的特定功能？可能吗？或者只将导航栏保留在自己的页面上更容易。

在应用程序之间共享导航栏帐户并通过任何路由组件使用其数据的最佳方法是将其保持在您认为的app.vue级别。 然后，棘手的部分是访问route组件中的搜索，但是使用Vuex存储非常容易

Vuex商店是您应用程序的一个集中真相来源。任何组件，只要深入到你的应用程序结构中，都可以通过这个访问它。$store或其他API（）

您所要做的就是将搜索值存储在其中，并根据需要让所有组件访问它

下面是一个简单的例子：

const mainComponent=Vue.component（“mainComponent”{
计算：{
搜索（）{
返回此项。$store.state.search
}
},
模板：“主组件搜索：{{search}}转到其他”
});
const otherComponent=Vue.component（“otherComponent”{
计算：{
搜索（）{
返回此项。$store.state.search
}
},
模板：“其他组件搜索：{{search}}转到Main”
});
const store=新的Vuex.store({
声明：{
搜索：“”
},
突变：{
搜索（状态、有效载荷）{
state.search=有效载荷；
}
}
});
常量路由器=新的VueRouter({
路线：[{
路径：“*”，
重定向：“/”
},
{
路径：“/”，
组件：主组件
},
{
路径：“/其他”，
组件：其他组件
}
]
});
新Vue({
el:“应用程序”，
商店，
路由器，
数据：{
搜索值：“”
},
方法：{
次搜索（）{
this.store.commit（“search”，this.searchValue）；
}
}
})

---

请不要忘记查看提供的答案。将其标记为有效或注释，以解释其没有帮助的原因。