首先,项目结构如下:
想要让导航栏、侧边栏变为公共页面,则要在App.vue页面中加入。假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下:
<template> <div id="app"> <!-- 其他页 --> <el-container > <el-header> <!-- 导航栏 --> <header-nav></header-nav> </el-header> <el-container> <el-aside width="250px"> <!-- 侧边栏 --> <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>
此时运行会发现,所有的页面都被加上了这两个公共页面,而实际场景中,我们往往希望登录页是不需要导航栏和侧边栏的,那么就需要规避掉登录页。
这时,就可以采用keep-alive结合$route.meta来实现这个功能。keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。$route.meta则可以选择让需要的页面才展示。修改App.vue,如下:
<template> <div id="app"> <!-- 其他页 --> <el-container v-if="$route.meta.keepAlive"> <el-header> <keep-alive> <!-- 导航栏 --> <header-nav></header-nav> </keep-alive> </el-header> <el-container> <el-aside width="250px"> <!-- 侧边栏 --> <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 } }, ] })
通过设置keepAlive的值就可以实现除了登录页不展示公共页面,在其他页面均展示的功能。
以上这篇vue设置导航栏、侧边栏为公共页面的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,导航栏,侧边栏,公共页面
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue设置导航栏、侧边栏为公共页面的例子”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
20240516
20240516
- [ABC唱片]-《邓丽君—永远的歌声(日语)》[K2-029][K2CD]WAV+CUE
- 吴牧野《强者独白II 李斯特巅峰作品选》[FLAC/分轨][286.41MB]
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 林俊杰《他是... JJ林俊杰》[FLAC][809M]
- dnf红眼110版本加点
- 星穹铁道2.2主线任务在我们的时代里全流程 崩铁2.2主线任务合集
- 黑帝斯哈迪斯2前期最强套路介绍 哈迪斯黑帝斯2简单套路图文攻略
- 中唱唱片群星《好歌珍藏-激情年代2CD》WAV
- 水木年华《在他乡》开盘母带[低速原抓WAV+CUE]
- 齐秦·谢彩妘《燃烧爱情》2016[WAV分轨]
- 陈慧娴《永远是你的陈慧娴》特别版MQS[FLAC][1.7G]
- 孙露《情调私语+我的歌》3CD[WAV+CUE][1.6G]
- 陈宁《你忙我忙+青春未央+那天晚上》3CD[WAV+CUE][1.5G]
- 黑帝斯哈迪斯2全武器和工具介绍 黑帝斯哈迪斯2全武器和工具图文指南
- 黑帝斯哈迪斯2流派玩法推荐 黑帝斯哈迪斯太难了怎么玩