Vue.js 路由导航条制作：动态高亮显示当前页面

<template>
  <nav>
    <ul class='mainmenu' :class='current'>
      <router-link to='/fukuang'><li>待付款</li></router-link>
      <router-link to='/fahuo'><li>待发货</li></router-link>
      <router-link to='/shouhuo'><li>待收货</li></router-link>
    </ul>
  </nav>
  <router-view/>
</template>
<style>
  .mainmenu {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 204px;
    border: 1px solid #000;
  }
  
  .mainmenu li {
    background-color: #FFA500;
    display: inline-block;
    padding: 4px 10px;
  }
  
  .mainmenu li:hover {
    background-color: yellowgreen;
    color: #fff;
    font-weight: bold;
  }
  
  .mainmenu .router-link-active li {
    background-color: yellowgreen;
    color: #fff;
    font-weight: bold;
  }
</style>
<script>
  export default {
    computed: {
      current() {
        if (this.$route.path === '/fukuang') {
          return 'fukuang';
        } else if (this.$route.path === '/fahuo') {
          return 'fahuo';
        } else if (this.$route.path === '/shouhuo') {
          return 'shouhuo';
        } else {
          return '';
        }
      }
    }
  }
</script>