监听路由  watch   $route

vue项目中的App.vue 文件

<template>
<div id="app">
<!--include=[AdminUserManage,createUser]-->
<keep-alive >
<router-view/>
</keep-alive>
<TabBer v-if="tabbarshow"/> </div>
</template>
<script>
import TabBer from './components/public/TabBar.vue'
export default {
components:{
TabBer,
},
data() {
return {
tabbarshow:false
}
},
watch: {
$route(to,from) {
if(this.$route.path == "/Home"){
this.tabbarshow = true
}else if(this.$route.path =='/more'||this.$route.path =='/More'){
this.tabbarshow = true
}else{
this.tabbarshow = false
}
}
},
created(){
if(this.$route.path == "/Home"){
this.tabbarshow = true
}else if(this.$route.path =='/more'||this.$route.path =='/More'){
this.tabbarshow = true
}else{
this.tabbarshow = false
}
}
}
</script> <style> </style>

vue 在.vue文件里监听路由的更多相关文章

  1. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

  2. vue 如何通过监听路由变化给父级路由菜单添加active样式

    1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...

  3. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  4. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  5. Vue.js中 watch(深度监听)的最易懂的解释

    <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...

  6. vue使用element-ui的el-input监听不了回车事件解决

    vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...

  7. vue使用element-ui的el-input监听不了键盘事件解决

    vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...

  8. vue 如何在循环中 "监听" 的绑定v-model数据

    vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...

  9. vue解惑之v-on(事件监听指令)

    一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...

随机推荐

  1. You Only Look Once: Unified, Real-Time Object Detection(翻译)

    0 - 摘要 我们提出了YOLO,一种新的物体检测方法.之前的物体检测工作是通过重新使用分类器来进行检测.相反,我们将对象检测抽象为一个回归问题,描述为以空间分隔的边界框和相关的类别概率.一个简单的神 ...

  2. 20165237 2017-2018-2 《Java程序设计》第8周学习总结

    20165237 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 1.程序:一段静态的代码,它是应用软件执行的蓝本. 2.进程:程序的一次动态执行过程,它对应 ...

  3. LaTeX IEEE模板

    因为课程作业的要求需要完成一篇IEEE格式的论文,所以选择入门LaTeX.但是期间遇到了各种各样莫名其妙的坑.前前后后挣扎了两个多星期终于完成了IEEE模板的设置.下面详细记录一下让我深恶痛绝的心路历 ...

  4. ActiveMQ 动态网络链接

    ActiveMQ的broker-broker方式有两种,一种 静态连接一种是动态连接,一般使用静态连接,动态连接了解就好,没有过多的去测试. 1. 多播协议multicast ActiveMQ使用Mu ...

  5. Python学习笔记-随机数

    IronPython的random 只能在0-0.5之间,所以最后调用了C#的Random. #!/usr/bin/python #coding=utf-8 import random import ...

  6. 动态规划 - 198. House Robber

    URL : https://leetcode.com/problems/house-robber/ You are a professional robber planning to rob hous ...

  7. backgroud-size属性

    backgroud-size:100% 改为:backgroud-size:100% 100%; 就能解决下面的问题.

  8. 【转】python之模块array

    [转]python之模块array >>> import array#定义了一种序列数据结构 >>> help(array) #创建数组,相当于初始化一个数组,如: ...

  9. XE7/X10.2 Datasnap使用 dbExpress 连接MySQL数据库

    本人使用:DELPHI X10.2.2 版本连接 MYSQL 5.1 (安装 mysql-5.1.72-win32.msi)的32位版本,开始连接不了: 将 MYSQL 5.1 安装目录下bin 中的 ...

  10. 设计模式C++学习笔记之七(AbstractFactory抽象工厂模式)

      抽象工厂,提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类.对于工厂方法来说,抽象工厂可实现一系列产品的生产,抽象工厂更注重产品的组合. 看代码: 7.1.解释 main(),女 ...