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 相关文章推荐
javascript demo 基本技巧
Dec 18 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
Element Input输入框的使用方法
Jul 26 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
无线电的诞生过程
2021/03/01 无线电
多重?l件?合查?(二)
2006/10/09 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
numpy matrix和array的乘和加实例
2018/06/28 Python
Python 串口读写的实现方法
2019/06/12 Python
python实现五子棋小程序
2019/06/18 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
房屋改造计划书
2014/01/10 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
导游词之北京明十三陵
2019/10/28 职场文书