解决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 相关文章推荐
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
Vue实现简单的留言板
Oct 23 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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
PHP个人网站架设连环讲(一)
2006/10/09 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php class类的用法详细总结
2013/10/17 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
动态表格Table类的实现
2009/08/26 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
js实现分页功能
2017/05/24 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
理解Python中函数的参数
2015/04/27 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
小学生国旗下演讲稿
2014/04/25 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
详解CocosCreator项目结构机制
2021/04/14 Javascript
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android