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奇异的arguments分析
Oct 20 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
Jquery $when done then的用法详解
May 20 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
纯JS实现轮播图
Feb 22 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
js+canvas实现画板功能
Sep 13 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
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
php无限极分类实现方法分析
2019/07/04 PHP
javascript里的条件判断
2007/02/27 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
用Python编写web API的教程
2015/04/30 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python super()方法原理详解
2020/03/31 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
士力架广告词
2014/03/20 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
财务情况说明书范文
2014/05/06 职场文书
多媒体教室标语
2014/06/26 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Java设计模式之享元模式示例详解
2022/03/03 Java/Android
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python