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

<template>
  <nav>
<pre><code>&lt;ul class=&quot;mainmenu&quot; :class=&quot;current&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&gt;待发货&lt;/li&gt;&lt;/router-link&gt;

    &lt;router-link to=&quot;/shouhuo&quot;&gt;&lt;li&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 .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>