解决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 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
JS搜狐面试题分析
Dec 16 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
jquery replace方法去空格
May 08 jQuery
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
微信小程序实现单选功能
Oct 30 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
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js QQ客服悬浮效果实现代码
2014/12/12 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python设计模式之代理模式简单示例
2018/01/09 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
初中女生自我鉴定
2013/12/19 职场文书
应届生如何写自荐信
2014/01/05 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
个人道歉信大全
2019/04/11 职场文书
java基础——多线程
2021/07/03 Java/Android
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang