vue 在.vue文件里监听路由
监听路由 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文件里监听路由的更多相关文章
- vue中监听路由参数变化
今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面 /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...
- vue 如何通过监听路由变化给父级路由菜单添加active样式
1.项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式. 2.遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact ...
- vue 定义全局函数,监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- Vue.js中 watch(深度监听)的最易懂的解释
<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text& ...
- vue使用element-ui的el-input监听不了回车事件解决
vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的: <el-inp ...
- vue使用element-ui的el-input监听不了键盘事件解决
vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...
- vue 如何在循环中 "监听" 的绑定v-model数据
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...
- vue解惑之v-on(事件监听指令)
一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...
随机推荐
- 【blog】MarkDown语法解析为HTML工具
txtmark <dependency> <groupId>es.nitaur.markdown</groupId> <artifactId>txtma ...
- 开源RPC Jupiter
ref https://github.com/fengjiachun/doc/tree/master/netty https://budairenqin.iteye.com/ https://blog ...
- centos7图形化界面安装KVM虚拟机
一.检查kvm和libvirt 是否安装 查看内核模块中是否含有kvm lsmod | grep kvm 查看cpu是否支持虚拟化 egrep -c '(vmx|svm)' /proc/cpuinfo ...
- OGG选择捕捉和应用模式
本章包含的信息可帮助您确定适用于数据库环境的捕获和应用模式. 主题: Oracle GoldenGate捕获和应用进程概述 决定使用哪种捕捉方法 决定使用哪种应用方法 同时使用不同的捕捉和应用模式 切 ...
- elasticsearch入门笔记
安装 注意:elasticsearch需要非ROOT用户启动 https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html 下载elasticsea ...
- 【leetcode】657. Robot Return to Origin
Algorithm [leetcode]657. Robot Return to Origin https://leetcode.com/problems/robot-return-to-origin ...
- (转载)经典计算机视觉论文笔记——DeepFace\DeepID\DeepID2\DeepID3\FaceNet\VGGFace汇总
1. DeepFace:Closing the Gap to Human-Level Performance in Face Verification 最早将深度学习用于人脸验证的开创性工作.Face ...
- Pthread:POSIX 多线程程序设计【转】
转自:http://www.cnblogs.com/mywolrd/archive/2009/02/05/1930707.html#phtread_ref POSIX 多线程程序设计 Blaise ...
- UniGUI 如何进行 UniDBGrid 的单元 Cell 的计算 ?
来源:http://forums.unigui.com/index.php?/topic/10508-update-dataset-events-in-unidbgrid/?hl=unidbgrid ...
- linux添加swap分区【转】
概述 添加交换分区主要是因为安装oracle时碰到交换分区太小时无法安装的情况,这时候就需要添加交换分区了. 操作简介 增加swap分区方法: 1.新建磁盘分区作为swap分区 2.用文件作为swap ...