根据以下代码使用路由相关知识制作导航条template nav ul class=mainmenu class=current router-link to=fukuangli待付款lirouter-link router-link to=fahuoli待发货lirouter-link router-link t

<template>
  <nav>
<pre><code>&lt;ul class=&quot;mainmenu&quot; :class=&quot;{active: $route.path === '/fukuang'}&quot;&gt;

    &lt;router-link to=&quot;/fukuang&quot;&gt;&lt;li&gt;待付款&lt;/li&gt;&lt;/router-link&gt;

    &lt;router-link to=&quot;/fahuo&quot;&gt;&lt;li :class=&quot;{active: $route.path === '/fahuo'}&quot;&gt;待发货&lt;/li&gt;&lt;/router-link&gt;

    &lt;router-link to=&quot;/shouhuo&quot;&gt;&lt;li :class=&quot;{active: $route.path === '/shouhuo'}&quot;&gt;待收货&lt;/li&gt;&lt;/router-link&gt;

&lt;/ul&gt;
</code></pre>
  </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>