Vue.js 路由导航栏实现教程：动态样式切换

<template>
  <nav>
    <ul class='mainmenu' :class='{active: $route.path === '/fukuang'}'>
      <router-link to='/fukuang'><li>待付款</li></router-link>
      <router-link to='/fahuo'><li :class='{active: $route.path === '/fahuo'}'>待发货</li></router-link>
      <router-link to='/shouhuo'><li :class='{active: $route.path === '/shouhuo'}'>待收货</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 .active {
    background-color: yellowgreen;
    color: #fff;
    font-weight: bold;
  }
</style>
<p>说明：</p>
<ol>
<li>通过路由链接 <code>&lt;router-link&gt;</code> 组件来实现导航栏的跳转；</li>
<li>使用 <code>$route.path</code> 属性来获取当前路由路径，从而来确定当前处于哪个导航栏；</li>
<li>通过 Vue.js 的动态 class 绑定来实现当前导航栏的样式变化。</li>
</ol>