data () { 
  return { 
   isSelect: '首页', 
   nav: [ 
    {title: '首页', url: require('../../assets/common/首页@2x.png'), url_one: require('../../assets/common/首页_active@2x.png')}, 
    {title: '店铺', url: require('../../assets/common/店铺@2x.png'), url_one: require('../../assets/common/店铺_active@2x.png')}, 
    {title: '创业直播', url: require('../../assets/common/直播@2x.png'), url_one: require('../../assets/common/直播_active@2x.png')}, 
    {title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')} 
   ] 
  } 
 }, 

<ul> 
  <li v-for="item in nav" @click="selectNav(item.title)"> 
   <img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title"> 
   <p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p> 
  </li> 
 </ul> 

methods: { 
   selectNav (title) { 
    this.isSelect = title 
   } 

methods: { 
   selectNav (title) { 
    this.isSelect = title 
    switch (title) { 
     case '首页': this.$router.push('/index') 
      break 
     case '店铺': this.$router.push('/shop') 
      break 
     case '创业直播': this.$router.push('/live') 
      break 
     case '我的': this.$router.push('/my') 
      break 
    } 
    sessionStorage.setItem('isSelect', this.isSelect) 
   } 
  } 

mounted () { 
  this.isSelect = sessionStorage.getItem('isSelect') 
 }, 
 methods: { 
  selectNav (title) { 
   this.isSelect = title 
   sessionStorage.setItem('isSelect', this.isSelect) 
  } 
 } 

routes: [ 
 { 
  path: '/', 
  redirect: '/index' 
 }, 
 { 
  path: '/index', 
  name: '首页', 
  component: index 
 }, 
 { 
  path: '/live', 
  name: '创业直播', 
  component: live 
 }, 
 { 
  path: '/my', 
  name: '我的', 
  component: my 
 }, 
 { 
  path: '/shop', 
  name: '店铺', 
  component: shop 
 } 
] 

mounted () { 
  this.isSelect = this.$route.name 
 }, 

 * rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = .32rem】 
 */ 
!function (window) { 
 
  /* 设计图文档宽度 */ 
  var docWidth = 750; 
 
  var doc = window.document, 
    docEl = doc.documentElement, 
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; 
 
  var recalc = (function refreshRem () { 
    var clientWidth = docEl.getBoundingClientRect().width; 
 
    /* 8.55：小于320px不再缩小，11.2：大于420px不再放大 */ 
    docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; 
 
    return refreshRem; 
  })(); 
 
  /* 添加倍屏标识，安卓为1 */ 
  docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); 
 
  if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) { 
    /* 添加IOS标识 */ 
    doc.documentElement.classList.add('ios'); 
    /* IOS8以上给html添加hairline样式，以便特殊处理 */ 
    if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8) 
      doc.documentElement.classList.add('hairline'); 
  } 
 
  if (!doc.addEventListener) return; 
  window.addEventListener(resizeEvt, recalc, false); 
  doc.addEventListener('DOMContentLoaded', recalc, false); 
 
}(window); 

<template> 
 <div class="common_foot"> 
  <ul> 
   <li v-for="item in nav" @click="selectNav(item.title)"> 
    <img :src="isSelect === item.title ? item.url_one : item.url" alt="item.title"> 
    <p :class="isSelect === item.title ? 'active' : ''">{{item.title}}</p> 
   </li> 
  </ul> 
 </div> 
</template> 
 
<script> 
 export default { 
  data () { 
   return { 
    isSelect: '首页', 
    nav: [ 
     {title: '首页', url: require('../../assets/common/首页@2x.png'), url_one: require('../../assets/common/首页_active@2x.png')}, 
     {title: '店铺', url: require('../../assets/common/店铺@2x.png'), url_one: require('../../assets/common/店铺_active@2x.png')}, 
     {title: '创业直播', url: require('../../assets/common/直播@2x.png'), url_one: require('../../assets/common/直播_active@2x.png')}, 
     {title: '我的', url: require('../../assets/common/我的@2x.png'), url_one: require('../../assets/common/我的_active@2x.png')} 
    ] 
   } 
  }, 
  mounted () { 
   this.isSelect = this.$route.name 
  }, 
  methods: { 
   selectNav (title) { 
    this.isSelect = this.$route.name 
    switch (title) { 
     case '首页': this.$router.push('/index') 
      break 
     case '店铺': this.$router.push('/shop') 
      break 
     case '创业直播': this.$router.push('/live') 
      break 
     case '我的': this.$router.push('/my') 
      break 
    } 
   } 
  } 
 } 
</script> 
 
<style lang="less" scoped> 
 .common_foot>ul{ 
  position: fixed; 
  bottom: 0; 
  z-index: 1000; 
  height: 0.98rem; 
  width: 100%; 
  overflow: hidden; 
  background-color: white; 
  li{ 
   float: left; 
   width: 25%; 
   height: 100%; 
   text-align: center; 
   cursor: pointer; 
   padding: 0.15rem 0 0.13rem 0; 
  } 
  p{font-size: 0.2rem;color: #7f7f7f;} 
  img{ 
   width: 0.48rem; 
   height: 0.45rem; 
  } 
  .active{ 
   color: #ffd100; 
  } 
 } 
</style>