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 相关文章推荐
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python Matplotlib库入门指南
2015/05/18 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
目前最全的python的就业方向
2018/06/05 Python
python障碍式期权定价公式
2019/07/19 Python
python模块常用用法实例详解
2019/10/17 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python实现AI换脸功能
2020/04/10 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
机关职员工作检讨书
2014/10/23 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript