vue底部导航栏高亮

代码如下

<template>
  <div id="app">
    <footer>
      <router-link
        to="/movie/list"
        @click.native="changTab('/movie/list')"
        :class="{active:'/movie/list' ===$route.path}"
        class="fdcc"
      >
        <i class="iconfont icon-dianying ico"></i>
        <span class="mg-t-5">影片</span>
      </router-link>
      <router-link
        to="/cinema/list"
        @click.native="changTab('/cinema/list')"
        :class="{active:'/cinema/list' ===$route.path}"
        class="fdcc"
      >
        <i class="iconfont icon-yingyuana ico"></i>
        <span class="mg-t-5">影院</span>
      </router-link>
      <router-link
        to="/assemble"
        @click.native="changTab('/assemble')"
        :class="{active:'/assemble' ===$route.path}"
        class="fdcc"
      >
        <i class="iconfont icon-pintuandingdan ico"></i>
        <span class="mg-t-5">拼团</span>
      </router-link>
      <router-link
        to="/my"
        @click.native="changTab('/my')"
        class="fdcc"
        :class="{active:'/my' ===$route.path}"
      >
        <i class="iconfont icon-wo ico"></i>
        <span class="mg-t-5">我的</span>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    changTab(path) {
      this.$router.replace(path);
    }
  }
};
</script>

<style lang="less">
#app {
  footer {
    width: 100%;
    bottom: 0px;
    display: flex;
    position: fixed;
    background: orange;
    justify-content: space-around;
    align-items: center;
  }
  .active {
    color: red;
  }
}
</style>