美文网首页
mint-ui中tabar内容跟随路由变换

mint-ui中tabar内容跟随路由变换

作者: _孙小胖 | 来源:发表于2019-08-22 11:21 被阅读0次
<footer>
    <!--使用mint-ui中tabar-->
     <mt-tabbar v-model="message" fixed class="h2">
        <mt-tab-item id="/homeAndroid" >
          <i class="icon iconfont el-fontshouye1 index"></i>
          <p>首页</p>
        </mt-tab-item>
        <mt-tab-item id="/info" >
          <i class="icon iconfont el-fontxiaoxi2 info"></i>
          <p>消息提醒</p>
        </mt-tab-item>
        <mt-tab-item id="/Feature" >
          <i class="icon iconfont el-fontgongzuotai more"></i>
          <p>其他功能</p>
        </mt-tab-item>
        <mt-tab-item id="/Mine">
          <i class="icon iconfont el-fontyonghuguanli1 me"></i>
          <p>我的</p>
        </mt-tab-item>
      </mt-tabbar>
</footer>

data() {
    return{
        //选中的tabbar值message为外面页面传入的值selected
        message:this.$router.path,
    }
},
props: {
    selected: String,
},
watch: {
    meaagea: function(val,oldVal){
        this.message = val;
        this.$router.push(val);
    }
}

相关文章

  • mint-ui中tabar内容跟随路由变换

  • 自己动手实现一个前端路由

    单页面应用利用了JavaScript动态变换网页内容,避免了页面重载;路由则提供了浏览器地址变化,网页内容也跟随变...

  • Vue基础-路由

    路由--按照path变换,router-view里面的组件变换 创建一个路由对象VueRouter({routes...

  • 路由之章

    路由--按照path变换,router-view里面的组件变换 创建一个路由对象吧VueRouter({route...

  • router路由变换

  • Tabar中,转场动画

    要实现单击item转场动画,只需实现UITabBarDelegate下面的这个方法 该代理方法加入位置,为自定义的...

  • 关于vue项目中的坑

    1、关于路由的懒加载问题: 1.1、关于dom的懒加载问题:(mint-ui里面有或者直接 npm i lazyl...

  • VUE首屏加载优化

    (1)组件按需加载;对Element-UI, Mint-UI组件进行按需加载;(2)路由组建懒加载;异步加载con...

  • angular中路由和路由参数

    路由 根据url中不同的锚点值,在页面显示不同的内容! 路由使用 路由完整代码 路由参数 在原有规则中可以加冒号:...

  • 路由模块

    路由模块控制vue内容显示,路由跳转,组件间的跳转。就是一个页面中实现不同组件内容的切换 1. 安装路由模块 ...

网友评论

      本文标题:mint-ui中tabar内容跟随路由变换

      本文链接:https://www.haomeiwen.com/subject/uvtnsctx.html