vue-router如何持久化navbar？

Question

我正在学习来自React的Vue,并想知道保持导航栏的正确方法是什么 - 我在那里使用路由器链接进行导航.

我有一个带有路由器链接的导航栏组件,但它在前往另一条路线时正在重新加载.有没有办法坚持它在身体组件的"外部"？比如在前往新路线时不会重新渲染？

我尝试将它放在路由器视图之外,但它不会在任何地方呈现:

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

如果它进入内部相同.

如何坚持导航栏？它应该是进入路由器的所有组件的父级,还是最佳实践？

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/