zoukankan      html  css  js  c++  java
  • vue 监听路由变化

    <script>
      // 引入 Tabbar组件
      import mTabbar from './components/Tabbar'
      import mTabbarItem from './components/TabbarItem'
      // 引入 vuex 的两个方法
      import {mapGetters, mapActions} from 'vuex'
     
      export default {
        name: 'app',
        // 计算属性
        computed:mapGetters([
          // 从 getters 中获取值
          'tabbarShow'
        ]),
        // 监听,当路由发生变化的时候执行
        watch:{
          $route(to,from){
            if(to.path == '/' || to.path == '/Prisoner' || to.path == '/Goods' || to.path == '/Time' || to.path == '/Mine'){
              /**
               * $store来自Store对象
               * dispatch 向 actions 发起请求
               */
              this.$store.dispatch('showTabBar');
            }else{
              this.$store.dispatch('hideTabBar');
            }
          }
        },
        beforeRouteEnter (to, from, next) {
          // 在渲染该组件的对应路由被 confirm 前调用
          // 不!能!获取组件实例 `this`
          // 因为当钩子执行前,组件实例还没被创建
        },
        beforeRouteUpdate (to, from, next) {
          // 在当前路由改变,但是该组件被复用时调用
          // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
          // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
          // 导航离开该组件的对应路由时调用
          // 可以访问组件实例 `this`
        },
        components:{
          mTabbar,
          mTabbarItem
        },
        data() {
          return {
            select:"Building"
          }
        }
      }
    </script>
  • 相关阅读:
    《2019年软件工程助教培训计划》
    地铁线路项目-结对编程
    预培训-个人项目(地铁线路规划)
    粗读《构建之法》后的问题
    netapp 修改IP地址
    jump server 2.6.1 安装与配置
    CCNA-实验1-Manage_IOS
    系统结构综合实践期末大作业 第22组
    2017级系统综合实践第7次实践作业 01组
    2017级系统综合实践第6次实践作业 01组
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/9372486.html
Copyright © 2011-2022 走看看