您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue怎么設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁面,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
首先,項目結(jié)構(gòu)如下:
想要讓導(dǎo)航欄、側(cè)邊欄變?yōu)楣岔撁妫瑒t要在App.vue頁面中加入。假設(shè)已經(jīng)有了Header.vue和Left.vue,這里就不貼出來了,App.vue代碼如下:
<template> <div id="app"> <!-- 其他頁 --> <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> <!-- 登錄頁 --> <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>
此時運行會發(fā)現(xiàn),所有的頁面都被加上了這兩個公共頁面,而實際場景中,我們往往希望登錄頁是不需要導(dǎo)航欄和側(cè)邊欄的,那么就需要規(guī)避掉登錄頁。
這時,就可以采用keep-alive結(jié)合$route.meta來實現(xiàn)這個功能。keep-alive 是 Vue 內(nèi)置的一個組件,可以使被包含的組件保留狀態(tài),或避免重新渲染。$route.meta則可以選擇讓需要的頁面才展示。修改App.vue,如下:
<template> <div id="app"> <!-- 其他頁 --> <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> <!-- 登錄頁 --> <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 } }, ] })
通過設(shè)置keepAlive的值就可以實現(xiàn)除了登錄頁不展示公共頁面,在其他頁面均展示的功能。
關(guān)于“vue怎么設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁面”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。