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

<template>
<pre><code>&lt;nav&gt;

  &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;

&lt;/nav&gt;

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