vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁(yè)面的例子
首先,項(xiàng)目結(jié)構(gòu)如下:
想要讓導(dǎo)航欄、側(cè)邊欄變?yōu)楣岔?yè)面,則要在App.vue頁(yè)面中加入。假設(shè)已經(jīng)有了Header.vue和Left.vue,這里就不貼出來(lái)了,App.vue代碼如下:
<template> <div id="app"> <!-- 其他頁(yè) --> <el-container > <el-header> <!-- 導(dǎo)航欄 --> <header-nav></header-nav> </el-header> <el-container> <el-aside width="250px"> <!-- 側(cè)邊欄 --> <left></left> </el-aside> <el-main> <!-- Body --> <router-view></router-view> </el-main> </el-container> </el-container> <!-- 登錄頁(yè) --> <router-view ></router-view> </div> </template> <script> import header from './components/Header.vue'; import left from './components/Left.vue'; export default{ components: { headerNav: header, left: left } } </script> <style> </style>
此時(shí)運(yùn)行會(huì)發(fā)現(xiàn),所有的頁(yè)面都被加上了這兩個(gè)公共頁(yè)面,而實(shí)際場(chǎng)景中,我們往往希望登錄頁(yè)是不需要導(dǎo)航欄和側(cè)邊欄的,那么就需要規(guī)避掉登錄頁(yè)。
這時(shí),就可以采用keep-alive結(jié)合$route.meta來(lái)實(shí)現(xiàn)這個(gè)功能。keep-alive 是 Vue 內(nèi)置的一個(gè)組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。$route.meta則可以選擇讓需要的頁(yè)面才展示。修改App.vue,如下:
<template> <div id="app"> <!-- 其他頁(yè) --> <el-container v-if="$route.meta.keepAlive"> <el-header> <keep-alive> <!-- 導(dǎo)航欄 --> <header-nav></header-nav> </keep-alive> </el-header> <el-container> <el-aside width="250px"> <!-- 側(cè)邊欄 --> <keep-alive> <left></left> </keep-alive> </el-aside> <el-main> <!-- Body --> <router-view></router-view> </el-main> </el-container> </el-container> <!-- 登錄頁(yè) --> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> import header from './components/Header.vue'; import left from './components/Left.vue'; export default{ components: { headerNav: header, left: left } } </script> <style> </style>
index.js代碼如下:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Login from '@/views/Login' import index from '@/views/index' import versionList from '@/views/versionList' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'login', component: Login, meta: { keepAlive: false } }, { path: '/index', name: 'index', component: index, meta: { keepAlive: true } }, { path: '/versionList', name: 'versionList', component: versionList, meta: { keepAlive: true } }, ] })
通過(guò)設(shè)置keepAlive的值就可以實(shí)現(xiàn)除了登錄頁(yè)不展示公共頁(yè)面,在其他頁(yè)面均展示的功能。
以上這篇vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁(yè)面的例子就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題解決方案
在lodash函數(shù)工具庫(kù)中,防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用,這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決,需要的朋友可以參考下2023-10-10Vue利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實(shí)現(xiàn)實(shí)時(shí)天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12vue監(jiān)聽(tīng)sessionStorage中值的變化方式
這篇文章主要介紹了vue監(jiān)聽(tīng)sessionStorage中值的變化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07多個(gè)vue項(xiàng)目復(fù)用一個(gè)node_modules的問(wèn)題
這篇文章主要介紹了多個(gè)vue項(xiàng)目復(fù)用一個(gè)node_modules的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證的方法
策略模式(Strategy Pattern)又稱(chēng)政策模式,其定義一系列的算法,把它們一個(gè)個(gè)封裝起來(lái),并且使它們可以互相替換。封裝的策略算法一般是獨(dú)立的,策略模式根據(jù)輸入來(lái)調(diào)整采用哪個(gè)算法。這篇文章主要介紹了策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證,需要的朋友可以參考下2019-09-09前端項(xiàng)目中的Vue、React錯(cuò)誤監(jiān)聽(tīng)
這篇文章主要介紹了前端項(xiàng)目中的Vue、React錯(cuò)誤監(jiān)聽(tīng),文章圍繞主題的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-04-04使用sessionStorage解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題
localStorage沒(méi)有時(shí)間期限,除非將它移除,sessionStorage即會(huì)話,當(dāng)瀏覽器關(guān)閉時(shí)會(huì)話結(jié)束,有時(shí)間期限,具有自行百度。本文使用的是sessionStorage解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題,需要的朋友可以參考下2018-04-04