监听路由  watch   $route

vue项目中的App.vue 文件

  1. <template>
  2. <div id="app">
  3. <!--include=[AdminUserManage,createUser]-->
  4. <keep-alive >
  5. <router-view/>
  6. </keep-alive>
  7. <TabBer v-if="tabbarshow"/>
  8.  
  9. </div>
  10. </template>
  11. <script>
  12. import TabBer from './components/public/TabBar.vue'
  13. export default {
  14. components:{
  15. TabBer,
  16. },
  17. data() {
  18. return {
  19. tabbarshow:false
  20. }
  21. },
  22. watch: {
  23. $route(to,from) {
  24. if(this.$route.path == "/Home"){
  25. this.tabbarshow = true
  26. }else if(this.$route.path =='/more'||this.$route.path =='/More'){
  27. this.tabbarshow = true
  28. }else{
  29. this.tabbarshow = false
  30. }
  31. }
  32. },
  33. created(){
  34. if(this.$route.path == "/Home"){
  35. this.tabbarshow = true
  36. }else if(this.$route.path =='/more'||this.$route.path =='/More'){
  37. this.tabbarshow = true
  38. }else{
  39. this.tabbarshow = false
  40. }
  41. }
  42. }
  43. </script>
  44.  
  45. <style>
  46.  
  47. </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. mysql 原理 ~ 死锁问题

    一 锁1 锁的定义   1 按照宏观角度     共享锁[S锁]     又称读锁,若事务T对数据对象A加上S锁,则事务T可以读A但不能修改A,其他事务只能再对A加S锁,而不能加X锁,直到T释放A上的 ...

  2. java汇总

    BeanUtils 操作Javabean 需要导入jar包,并且加入到构建路径里面去,选择右键--加入到****,jar包的图标变成奶瓶: => 位置会变成上一层: ======== 原来已经配 ...

  3. neutron-----openstack网络操作

    #查看子网 openstack subnet list #删除子网 openstack subnet delete name/id #查看网络 openstack network list #删除网络 ...

  4. quartz定时任务的简单使用

    开发环境: springmvc quartz-2.2.3在官网下载的. 步骤: 1.首先在web.xml中加入以下代码: <servlet> <servlet-name>Qua ...

  5. CF1100E Andrew and Taxi

    题目地址:CF1100E Andrew and Taxi 二分,每次取到一个 \(mid\) ,只保留长度 \(>mid\) 的边 dfs判环,若有环,说明 \(ans>mid\) ,否则 ...

  6. 【CentOS7.0】虚拟机如何实现扩展存储空间

    写在前面的一些小废话 有时候,虚拟机随着使用,会导致存储不够,这时就需要给虚拟机扩容. 扩容的前提是,此虚拟机没有快照. 扩容时,需要编辑虚拟机设置.为了形成对比,第一张图片是扩容前,第二张图片是扩容 ...

  7. 876. Middle of the Linked List

    1. 原始题目 Given a non-empty, singly linked list with head node head, return a middle node of linked li ...

  8. 使用unix的time命令进行简单的计时

    /usr/bin/time -p python3 1.py 需要注意这里使用的是/usr/bin/time 命令而不unix系统自带time. 输出 real 0.04 user 0.03 sys 0 ...

  9. pppd[15863]: Terminating on signal 15

    由于广网于网上pptp服务器和client之间存在一些问题: 1)windows 客户端出现619 或800等错误 ----极有可能是服务器端未开启nat-t功能 2)ubunut 客户端没有拿到IP ...

  10. MySQL--(了解)可能会用到的内置函数

    mysql内置函数列表可以从mysql官方文档查询,这里仅分类简单介绍一些可能会用到的函数.1 数学函数abs(x)pi()mod(x,y)sqrt(x)ceil(x)或者ceiling(x)rand ...