解决vue项目中某一页面不想引用公共组件app.vue的问题


Posted in Javascript onAugust 14, 2020

Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢?

vue中文文档:点击进入

在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面:

<template>
  <div id="app">
    <home-header v-show="!(path ==='/') "></home-header>
    <home-aside v-show="!(path ==='/')"></home-aside>
    <router-view/>
  </div>
</template>
 
<script>
  import HomeHeader from './components/header/Header'
  import HomeAside from './components/aside/Aside'
  export default {
    name: 'App',
    data(){
      return{
        path:''
      }
    },
    components: {
      HomeHeader,
      HomeAside,
    },
    // 判断路由
    mounted() {
     this.path = this.$route.path;
     // console.log(this.$route.path)
    },
    watch:{
      $route(to,from){
        this.path = to.path
      }
    }
  }
</script>
<style>
</style>

在mounted(){}中使用this.path=当前页面的路由然后使用watch监测变化

补充知识:在app.vue里面注册的组件,然后想在首页不显示,需要怎样控制呢?vue切换路由的时候,在哪儿监控路由变化呢?

需求是这样的:

除了首页之外,每个页面上都要显示一个【返回的导航栏】。

那么问题来了,怎样控制首页返回导航栏的显示与隐藏呢。

思路:

在【返回的导航栏】组件里面,监听路由的变化,然后在监听里面进行判断即可。

代码:

<template>
 <div id="back" v-if="isShowBack">
  <div class="back_box" @click="toBack()">
   <span class="left_arrow">
    <img src="../../../static/images/icon_arrow_bottom_left.png" />
   </span>
  </div>
 </div>
</template>
 
<script>
 var that;
 export default {
  data() {
   return {
    msg: '',
    isShowBack:false
   }
  },
  methods: {
   toBack() {
    console.log('点击了返回')
    this.$router.go(-1);
   }
  },
  watch:{
   '$route':function(){
    that = this;
    console.log('watch里面',that.$route.name);
    if(that.$route.name == 'HomeNew'){
     that.isShowBack = false;
    }else{
     that.isShowBack = true;
    }
   }
  }
 }
</script>
 
<style scoped="scoped">
 .back_box {
  width: 100%;
  height: 30px;
  background: #f1f1f1;
 }
 
 .left_arrow {
  width: 22px;
  display: inline-block;
  transform: rotate(90deg);
  margin-top: 4px;
  margin-left: 4px;
 }
 
 .left_arrow img {
  width: 100%;
 }
</style>

------完。

以上这篇解决vue项目中某一页面不想引用公共组件app.vue的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
JavaScript WeakMap使用详解
Feb 05 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 #Javascript
JS+css3实现幻灯片轮播图
Aug 14 #Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 #Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 #Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 #Javascript
jQuery中event.target和this的区别详解
Aug 13 #jQuery
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
php ios推送(代码)
2013/07/01 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python编写爬虫小程序
2015/05/14 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
对python中的高效迭代器函数详解
2018/10/18 Python
Python rstrip()方法实例详解
2018/11/11 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
应届大学生的推荐信
2013/11/20 职场文书
实习自我鉴定
2013/12/15 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
出差报告范文
2014/11/06 职场文书
如何写观后感
2015/06/19 职场文书