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(){
        return {
          'router-link-active': this.$route.path === '/fukuang' || this.$route.path === '/fahuo' || this.$route.path === '/shouhuo',
        }
      }
    }
  }
</script>