首页 > 其他 > 详细

固定底部菜单栏,点击跳转到指定路由

时间:2020-05-06 15:49:37      阅读:72      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片   技术分享图片  技术分享图片  技术分享图片

html代码

  <div class="lay-item" v-for="(item,index) in routerList" @click.nactive="changeItem(index)">
      <router-link :to="item.url" tag="span" :class="[active==index?‘item-active‘:‘‘]">{{item.tag}}</router-link>
    </div>

javascript代码:

data(){
      return{
        active:0,
        routerList:[
          {id:0,tag:"背单词",url:"/index"},
          {id:1,tag:"阅读",url:"/read"},
          {id:2,tag:"听力",url:"/listen"},
          {id:3,tag:"我",url:"/me"},
        ]
      },
  methods:{
      changeItem(index){
     this.routerList.forEach((item,i)=>{
      if(index==i){
      this.active=index

      this.$router.push(item.url)
      }
     })

     }

    },

   created(){
     const path=(this.$router.history.current.path)
      this.routerList.forEach((item,index)=>{
        if(item.url==path){
          this.active=index
        }
      })
   }

 

固定底部菜单栏,点击跳转到指定路由

原文:https://www.cnblogs.com/shanchui/p/12836374.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!