vue-module 네비게이션 바를 유지하는 방법

vue-module 네비게이션 바를 유지하는 방법

React에서 Vue를 배우고 있는데, 네비게이션 바를 유지하는 올바른 방법이 무엇인지 궁금해요.라우터 링크에 네비게이션이 있어요.

라우터 링크가 있는 navbar 컴포넌트가 있는데 다른 루트로 향할 때 새로고침이 됩니다.차체 구성 요소에서 "외부"로 고정할 수 있는 방법이 있습니까?예를 들어, 새로운 루트로 갈 때 재렌탈이 되지 않는 것입니까?

라우터의 뷰 밖에 배치하려고 했지만, 아무것도 표시되지 않습니다.

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

안에 들어가도 똑같아.

내비게이션 바를 유지하려면 어떻게 해야 합니까?라우터에 접속하는 모든 컴포넌트의 부모여야 합니까?아니면 베스트 프랙티스는 무엇입니까?

네비게이션 바는 외부로 렌더링해야 합니다.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>

이제 라우터를 설정하고 기본 App을 메인 Vue 인스턴스에 마운트하기만 하면 됩니다.

app.module

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앵커 태그가 아닌 경우:

탑내브바표시하다

<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/

언급URL : https://stackoverflow.com/questions/47431867/vue-router-how-to-persist-navbar