vue中點擊導航欄部分，頁面切換

寫頁面的時候都會用到一些導航欄、點擊不同的部分切換不同的頁面、並且點擊的時候更換顏色

代碼自己簡單的寫一下：(vue)

<nav>  
　　<ul>
　　　　<li v-for="(item, i) in navData" :class="{ nav_li : active === i }" :key="i" @click="$router.push({ path: item.path }), active = i">
　　　　　　{{item.name}}
　　　　</li>
   </ul> 
</nav>

js部分代碼：

<script>
export default {
  data () {
    return {
      active: 0,
      navData: [
        { name: '1', path: '/配置的路由' },
        { name: '2', path: '/配置的路由' },
        { name: '3', path: '/配置的路由' },
        { name: '4', path: '/配置的路由' },
        { name: '5', path: '/配置的路由' }
      ]
    }
  }
</script>

css樣式：

 ul {
        width: 1200px;
        height: 88px;
        line-height: 88px;
        margin: 0 auto;
        background: #3b2d50;
        color: #fff;
        font-size: 18px;
        display: flex;
         justify-content: space-between;
       
        li {
                text-align: center;
            }
            .nav_li {
                background-color: #dedede;
                color: #353535;
  }