vue-router 如何持久化导航栏? [英] vue-router how to persist navbar?
问题描述
我正在学习来自 React 的 Vue，并想知道持久化导航栏的正确方法是什么 - 我在那里使用路由器链接进行导航.
我有一个带有路由器链接的导航栏组件，它可以工作，但在前往另一条路线时正在重新加载.有没有办法将它保持在身体成分的外部"?例如在前往新路线时不会重新渲染?
我尝试将它放在路由器视图之外，但它不会在任何地方呈现:
<div id="应用程序"><顶部导航栏></topnavbar><路由器视图></路由器视图></模板>
如果它进去也一样.
如何保留导航栏?它应该是进入路由器的所有组件的父级，还是最佳实践?
你的导航栏应该呈现在 router-view 之外，这里是如何设置它(你可能已经做了很多).
首先，从一个为所有路线提供服务的基础应用开始:
App.vue(基础应用)
<顶部导航栏/><路由器视图/></模板><script type="text/javascript">从'./topnavbar.vue'导入topnavbar导出默认{成分:{topnavbar//注册组件}}现在您需要做的就是设置您的路由器并将基本应用程序安装到您的主要 Vue 实例:
app.js
从'vue'导入Vue从 'vue-router' 导入 VueRouterimport App from ''./components/App.vue//导入基础组件Vue.use(VueRouter);//导入你想在`router-view`中提供的视图从 './components/views/Foo.vue' 导入 Foo从'./components/views/Bar.vue'导入栏const 路由 = [{路径:'/foo'，组件: Foo},{路径:'/bar',组件:酒吧},]const 路由器 = 新的 VueRouter({模式:'历史'，路线})新的 Vue({渲染:h =>h(App),//挂载基础组件路由器}).$mount('#app')那应该设置一切.现在，为了确保导航栏不会刷新，请确保使用 router-link 而不是锚标记:
Topnavbar.vue
现在应该在您的应用程序中提供组件，而无需在每次导航到不同页面时重新渲染 topnavbar.
这是 JSFiddle:https://jsfiddle.net/ukoebmwo/
I'm learning Vue coming from React, and wondering what the correct way to persist a navbar is - i have navigation on there with router links.
I have a navbar component with router-links which works, but it is reloading when heading to another route. Is there a way to persist it "outside" of the body components? Such as it isn't re-rendered when heading to a new route?
I tried putting it outside the router-view, but it does not render anywhere:
<template>
<div id="app">
<topnavbar>
</topnavbar>
<router-view>
</router-view>
</div>
</template>
Same if it goes inside.
How do I persist the navbar? Should it be the parent of all components that go into the router, or what is best practice?
Your navbar should render outside the router-view, here's how to set it up (you may have done a lot of this already).
First, start with a base app that serves up all your routes:
App.vue (Base App)
<template>
<topnavbar />
<router-view />
</template>
<script type="text/javascript">
import topnavbar from './topnavbar.vue'
export default{
components:{
topnavbar // register component
}
}
</script>
Now all you need to do is set up your router and mount the base App to your main Vue instance:
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')
That should set everything up. Now, in order to make sure that the navbar doesn't refresh make sure you use router-link and not anchor tags:
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>
That should now serve up the components in your app without re-rendering topnavbar each time you navigate to a different page.
Here's the JSFiddle: https://jsfiddle.net/ukoebmwo/
这篇关于vue-router 如何持久化导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
