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