在vue中實現(xiàn)某一些路由頁面隱藏導航欄的功能操作
更新時間：2020年09月21日 15:02:15 作者：bdlaxx
這篇文章主要介紹了在vue中實現(xiàn)某一些路由頁面隱藏導航欄的功能操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
為了將導航欄顯示在每一個頁面中，可以將導航欄與<router-view>放在同一級顯示，如下：
<header> ... </header> <router-view></router-view>
但是，在某些時候，我們需要隱藏導航欄顯示，比如登錄界面，為了實現(xiàn)導航欄的隱藏，可以使用如下代碼：
<header v-show="$route.name!=='login'"> ... </header> <router-view></router-view>
這樣就可以實現(xiàn)隱藏導航欄。
補充知識：vue+el-menu實現(xiàn)路由刷新和導航欄菜單狀態(tài)保持（局部刷新頁面）
一、菜單項激活狀態(tài)保持
有時，我們在項目中會有這樣一個需求，即實現(xiàn) 一個側(cè)導航欄，點擊不同的菜單項，右邊內(nèi)容會跟著變化，而頁面手動刷新后想要使菜單激活狀態(tài)保持，那么這個功能該如何實現(xiàn)呢？
現(xiàn)在給出以下解決辦法：
即加上這樣一段代碼即可：
:default-active="this.$route.path"
二、實現(xiàn)頁面的路由刷新（局部刷新）
想要實現(xiàn)路由的刷新，官方并沒有給出解決辦法，通過自己摸索和借鑒，得出了以下解決方法：
首先，新建一個空白頁面redirect.vue，然后寫入這樣一段代碼：
<script>
export default {
beforeCreate() {
console.log(this.$route)
const nextPath = this.$route.query.nextPath
this.$router.replace({ path: nextPath})
console.log("調(diào)用")
console.log(nextPath)
},
render: function(h) {
return h() // avoid warning message
}
}
</script>
之后在導航頁加入一個方法，如下：
//實現(xiàn)路由的局部刷新
reloadRouter(path) {
this.$router.replace({
path: "/redirect",
query: {
nextPath: path
}
});
}
再通過給每一個菜單項添加點擊事件，即可實現(xiàn)該功能：
以上這篇在vue中實現(xiàn)某一些路由頁面隱藏導航欄的功能操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli axios請求方式及跨域處理問題,文中還給大家提到了vue中axios解決跨域問題和攔截器使用，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了vue項目中Toast字體過小，沒有邊距的解決方案。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue項目跳轉(zhuǎn)同樣的頁面不刷新的問題思路詳解
做公司官網(wǎng)項目的時候遇到的場景,頂部導航欄分類商品跳轉(zhuǎn)到分類詳情,然后在分類詳情再次點擊頂部導航欄里另外的分類商品,跳到同樣的頁面數(shù)據(jù)不刷新,下面小編給大家分享解決方式,關(guān)于vue跳轉(zhuǎn)不刷新問題感興趣的朋友一起看看吧2023-09-09
Vue.js實現(xiàn)按鈕的動態(tài)綁定效果及實現(xiàn)代碼
本文通過實例代碼給大家介紹了Vue.js實現(xiàn)按鈕的動態(tài)綁定效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
XSS?攻擊是頁面被注入了惡意的代碼,下面這篇文章主要給大家介紹了一次VUE項目中遇到XSS攻擊的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
這篇文章主要為大家詳細介紹了vue拖拽排序插件vuedraggable的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了vue自定義指令實現(xiàn)方法,結(jié)合實例形式分析了vue.js自定義指令相關(guān)定義、注冊、使用方法及操作注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細介紹了vue中常見的加密方式實現(xiàn),例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代碼講解詳細,需要的小伙伴可以參考一下2023-11-11
vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)
這篇文章主要介紹了vue監(jiān)聽鍵盤事件的相關(guān)總結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue 在單頁面應用里使用二級套嵌路由，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12