vue设置导航栏、侧边栏为公共页面的例子


Posted in Javascript onNovember 01, 2019

首先,项目结构如下:

vue设置导航栏、侧边栏为公共页面的例子

想要让导航栏、侧边栏变为公共页面,则要在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设置导航栏、侧边栏为公共页面的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
Vue中jsx不完全应用指南小结
Nov 01 #Javascript
vue导航栏部分的动态渲染实例
Nov 01 #Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
You might like
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
详解javascript中var与ES6规范中let、const区别与用法
2020/01/11 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
毕业生教师求职信
2013/10/20 职场文书
销售找工作求职信
2013/12/20 职场文书
25岁生日感言
2014/01/13 职场文书
出纳员岗位职责
2014/03/13 职场文书
经典演讲稿汇总
2014/05/19 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
结婚司仪主持词
2015/06/29 职场文书