在vue中實現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作
為了將導(dǎo)航欄顯示在每一個頁面中，可以將導(dǎo)航欄與<router-view>放在同一級顯示，如下：
<header> ... </header> <router-view></router-view>
但是，在某些時候，我們需要隱藏導(dǎo)航欄顯示，比如登錄界面，為了實現(xiàn)導(dǎo)航欄的隱藏，可以使用如下代碼：
<header v-show="$route.name!=='login'"> ... </header> <router-view></router-view>
這樣就可以實現(xiàn)隱藏導(dǎo)航欄。
補充知識：vue+el-menu實現(xiàn)路由刷新和導(dǎo)航欄菜單狀態(tài)保持（局部刷新頁面）
一、菜單項激活狀態(tài)保持
有時，我們在項目中會有這樣一個需求，即實現(xiàn) 一個側(cè)導(dǎo)航欄，點擊不同的菜單項，右邊內(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>
之后在導(dǎo)航頁加入一個方法，如下：
//實現(xiàn)路由的局部刷新
reloadRouter(path) {
this.$router.replace({
path: "/redirect",
query: {
nextPath: path
}
});
}
再通過給每一個菜單項添加點擊事件，即可實現(xiàn)該功能：
以上這篇在vue中實現(xiàn)某一些路由頁面隱藏導(dǎo)航欄的功能操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
- 解決Vue路由導(dǎo)航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location
- vue3容器布局和導(dǎo)航路由實現(xiàn)示例
- vue如何根據(jù)權(quán)限生成動態(tài)路由、導(dǎo)航欄
- ant design vue導(dǎo)航菜單與路由配置操作
- vue 導(dǎo)航菜單刷新狀態(tài)不消失,顯示對應(yīng)的路由界面操作
- Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問題
- Vue?3?中使用?vue-router?進行導(dǎo)航與監(jiān)聽路由變化的操作
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue中適配px2rem的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue 最顯著的一個功能是響應(yīng)系統(tǒng) —— 模型只是普通對象，修改它則更新視圖。下面這篇文章主要給大家深入講解了關(guān)于Vue的響應(yīng)式原理，以及Vue響應(yīng)式的一些注意事項，需要的朋友下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)觸底查詢功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
elementui實現(xiàn)預(yù)覽圖片組件二次封裝
這篇文章主要介紹了elementui實現(xiàn)預(yù)覽圖片組件二次封裝的方法 ，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了VueX模塊的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
本文主要介紹了VSCode搭建vue項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步2023-10-10
本篇文章主要介紹了詳解vue2.0腳手架的webpack 配置文件分析，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue 2.0+Vue-router構(gòu)建一個簡單的單頁應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個簡單的單頁應(yīng)用，文中通過實例介紹的非常詳細，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來一起看看吧。2017-03-03