我正在学习来自React的Vue,并想知道保持导航栏的正确方法是什么 - 我在那里使用路由器链接进行导航 .
我有一个带有路由器链接的导航栏组件,但它在前往另一条路线时正在重新加载 . 有没有办法坚持它在身体组件的“外部”?比如在前往新路线时不会重新渲染?
我尝试将它放在路由器视图之外,但它不会在任何地方呈现:
<template>
<div id="app">
<topnavbar>
</topnavbar>
<router-view>
</router-view>
</div>
</template>
如果它进入内部相同 .
如何坚持导航栏?它应该是进入路由器的所有组件的父级,还是最佳实践?
1 回答
您的导航栏应该在
router-view
之外呈现,这是如何设置它(您可能已经完成了很多这样做) .首先,从提供所有路线的基础应用开始:
App.vue (Base App)
现在您需要做的就是设置路由器并将基础应用程序安装到主Vue实例:
app.js
这应该把一切都搞定 . 现在,为了确保导航栏不刷新,请确保使用
router-link
而不是锚标记:Topnavbar.vue
现在应该在您的应用中提供组件,而无需在每次导航到其他页面时重新呈现
topnavbar
.这是JSFiddle:https://jsfiddle.net/ukoebmwo/