美文网首页
footer多页面跳转

footer多页面跳转

作者: 苹果咏 | 来源:发表于2020-03-03 22:45 被阅读0次
<template>
  <div class="bottom-nav">
    <ul>
      <li :class="{active:index===curIndex}" 
      v-for="(list,index) in navConfig"
      :key="list.index"
      @click="changeNav(list,index)"
      >
        <a>
          <i :class="list.icon"></i>
          <div>{{ list.name }}</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import qs from 'qs'
let {index} = qs.parse(location.search.substr(1))
//主要是取到index的值,qs.parse('?index=1&name=tony') 这个是插件 要去掉这个问号‘?’
//{ index } = xxx 对象的解构赋值,如果不加{},index就是个对象

console.log(index)

let navConfig = [{
  name: '有赞',
  icon: 'icon-home',
  href: 'index.html'
},{
  name: '分类',
  icon: 'icon-category',
  href: 'category.html'
},{
  name: '购物车',
  icon: 'icon-cart',
  href: 'cart.html'
},{
  name: '我',
  icon: 'icon-user',
  href: 'member.html'
}]

export default {
  data() {
    return {
      navConfig,
      curIndex: parseInt(index) || 0
    }
  },
  methods: {
    changeNav(list,index){
      location.href = `${list.href}?index=${index}`
    }
  }
}
</script>

相关文章

网友评论

      本文标题:footer多页面跳转

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