vue-router 如何持久化导航栏？

Question

我正在学习来自 React 的 Vue，想知道保留导航栏的正确方法是什么 - 我在那里有带路由器链接的导航。

我有一个带有 router-links 的导航栏组件，它可以工作，但在前往另一条路线时正在重新加载。有没有办法将 body 组件的 "outside" 持久化？比如不是re-rendered去新路线？

我试着把它放在 router-view 之外，但它没有在任何地方呈现：

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

里面也一样。

如何保留导航栏？应该是进入路由器的所有组件的 parent，还是最佳做法？

Answer 1

您的导航栏应该呈现在 router-view 之外，这里是如何设置它（您可能已经做了很多这样的事情）。

首先，从一个为您的所有路线提供服务的基础应用程序开始：

App.vue（基础应用）

<template>
  <topnavbar />
  <router-view />
</template>

<script type="text/javascript">
  import topnavbar from './topnavbar.vue'
  export default{
    components:{
      topnavbar // register component
    }
  }

</script>

现在您需要做的就是设置您的路由器并将基本应用程序安装到您的主 Vue 实例：

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from ''./components/App.vue // import the base component

Vue.use(VueRouter);

// import views you want to serve up in `router-view`
import Foo from './components/views/Foo.vue' 
import Bar from './components/views/Bar.vue' 

const routes = [{
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  },
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  render: h => h(App), // mount the base component
  router
}).$mount('#app')

这应该设置一切。现在，为了确保导航栏不刷新，请确保使用 router-link 而不是锚标记：

Topnavbar.vue

<div id="topnav">
  <ul>
    <li><router-link to="foo">Foo</router-link></li>
    <li><router-link to="bar">Bar</router-link></li>
  <ul>
</div>

现在应该可以在您的应用程序中提供组件，而无需在您每次导航到不同页面时重新呈现 topnavbar。

这是 JSFiddle：https://jsfiddle.net/ukoebmwo/

vue-router 如何持久化导航栏？

vue-router how to persist navbar?

vue.js

vue-router

vuejs2