mint ui的tabBar监听路由变化实现tabBar切换

说明

  • 最近学习vue,使用了mint uitabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的。mui与它基本相反,因此它能根据搜索栏的路由变化,相应的tabBar高亮显示,而mint ui就不能,要加点代码实现了。
  • mint ui tabBar标签栏
    //页面 和 数据
    <template>
        <div id="main">
            <mt-tabbar v-model="selected">
                <mt-tab-item :id="home">
                    首页
                </mt-tab-item>
                <mt-tab-item :id="car">
                    购物车
                </mt-tab-item>
                <mt-tab-item :id="person">
                    我的
                </mt-tab-item>
            </mt-tabbar>
        </div>
    </template>

    <script>
        export default {
            data(){
                return {
                    //页面刷新取数据
                    selected: sessionStorage.getItem('selected')? JSON.parse(sessionStorage.getItem('selected')):'首页',
                    home: '首页',
                    car: '购物车',
                    person: '我的',
                }
            }
        }
    </script>
  • 监听路由的变化

    • 监听路由的变化,那就要使用到侦听器 watch 了。一旦selected变化,就保存到 sessionStorage,当页面刷新的时候,在初始化数据取出即可。
     watch: {
          selected(val, oldVal){
              //一旦标签栏变化,把selected的值存到sessionStorage,保存当前值
              sessionStorage.setItem('selected', JSON.stringify(val))
              if(val === this.home){
                  //路由跳转 到首页
                  this.$router.replace('/home')
              }else if(val === this.car){
                  //路由跳转 到购物车
                  this.$router.replace('/car')
              }else if(val === this.person){
                  //路由跳转 到个人中心
                  this.$router.replace('/person')
              }
          }

原文地址:https://www.cnblogs.com/HJ412/p/10771645.html

时间: 2024-11-05 17:24:12

mint ui的tabBar监听路由变化实现tabBar切换的相关文章

Angular 监听路由变化

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co

Angular 监听路由变化事件

摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... }) app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $co

react-router搭配react-redux无法监听路由变化的问题

在react中,要将react组件连接到redux中,通常会这样包装组件 class Home extends Component { } function select(state) { return { logBox:state.logBox } } export default connect(select)(Home) 但是当搭配react-router的时候,在进行路由跳转的时候,组件不会重新render.这个时候看react-redux的connect方法的说明: connect([

vue 监听路由变化

方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,当路由发生变化的时候执行 watch: { '$route':'getPath

vue页面内监听路由变化

beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组

Vue--watch控制监听路由地址-组件的变化----&#39;$route.path&#39;: function (newVal, oldVal)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

Angular.JS中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

ionic 监听路由事件 验证登录

.run(['$rootScope', '$location' , '$state', '$http','$ionicPopup', function($rootScope, $location, $state,$http,$ionicPopup){ var loginname=['tab.member','loan','repayment','iftab.exe']; $http.jsonp(apiurl+"/home/appapi/isLogin?callback=JSON_CALLBACK

Android实现后台长期监听时间变化

1.首先我们的目的是长期监听时间变化,事实上应用程序退出. 通过了解我们知道注冊ACTION_TIME_TICK广播接收器能够监听系统事件改变,可是 查看SDK发现ACTION_TIME_TICK广播事件仅仅能动态注冊: Broadcast Action: The current time has changed. Sent every minute. You can not receive this through components declared in manifests, only