溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關vue中實現某一些路由頁面隱藏導航欄功能的方法，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
為了將導航欄顯示在每一個頁面中，可以將導航欄與<router-view>放在同一級顯示，如下：
<header> ... </header> <router-view></router-view>
但是，在某些時候，我們需要隱藏導航欄顯示，比如登錄界面，為了實現導航欄的隱藏，可以使用如下代碼：
<header v-show="$route.name!=='login'"> ... </header> <router-view></router-view>
這樣就可以實現隱藏導航欄。
補充知識：vue+el-menu實現路由刷新和導航欄菜單狀態保持（局部刷新頁面）
一、菜單項激活狀態保持
有時，我們在項目中會有這樣一個需求，即實現 一個側導航欄，點擊不同的菜單項，右邊內容會跟著變化，而頁面手動刷新后想要使菜單激活狀態保持，那么這個功能該如何實現呢？
現在給出以下解決辦法：
即加上這樣一段代碼即可：
:default-active="this.$route.path"
二、實現頁面的路由刷新（局部刷新）
想要實現路由的刷新，官方并沒有給出解決辦法，通過自己摸索和借鑒，得出了以下解決方法：
首先，新建一個空白頁面redirect.vue，然后寫入這樣一段代碼：
<script>
export default {
beforeCreate() {
console.log(this.$route)
const nextPath = this.$route.query.nextPath
this.$router.replace({ path: nextPath})
console.log("調用")
console.log(nextPath)
},
render: function(h) {
return h() // avoid warning message
}
}
</script>之后在導航頁加入一個方法，如下：
//實現路由的局部刷新
reloadRouter(path) {
this.$router.replace({
path: "/redirect",
query: {
nextPath: path
}
});
}再通過給每一個菜單項添加點擊事件，即可實現該功能：
看完上述內容，你們對vue中實現某一些路由頁面隱藏導航欄功能的方法有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
