v-for遍历router-link 实现导航跳转

<template>
  <div class="box"> 
      联系我们
    <div class="dot_nav">
     <div class="dot"  v-for="(operate,path,index) in navTo.operate" @click="change(index)" :class="{ bgColors:index==current}">
        <router-link :to="{ path: operate.path }">
        {{operate.name}}
      </router-link>
     </div>     
    </div>
  </div>  
</template>

<script>

export default {
   methods: {
    change: function (index) {
      console.log(this); //vue实例
      console.log(index);
      this.current = index;
    },
  },data () {
    return {current: 0,
        navTo:{
            "operate":[
                  {"name":"","path":'/'},
                  {"name":"服务项目","path":'/serviceproject'},
                  {"name":"客户案例","path":'/contactus'},
                  {"name":"新闻资讯","path":'/customercase'},
                  {"name":"联系我们","path":'/news'},
           ]
        }
    }
  }
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 500px;
  background-color: greenyellow;
}
.router-link-exact-active{
  background: #ff5700;
}
</style>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from './pages/index.vue'
import contactUs from './pages/contactUs.vue'
import customerCase from './pages/customerCase.vue'
import news from './pages/news.vue'
import serviceProject from './pages/serviceProject.vue'
Vue.use(VueRouter)
    /*如果在一个模块化工程中使用它，必须要通过
     Vue.use() 明确地安装路由功能：

配置路由的路径 path  配置了关联 并 没有生效*/
const routes = [{
            path: '/',
            component: index
        }, {

            path: '/news',
            component: news
        }, {

            path: '/contactus',
            component: contactUs
        }, {

            path: '/customercase',
            component: customerCase
        }, {

            path: '/news',
            component: news
        }, {
            path: '/serviceproject',
            component: serviceProject
        }

    ]
    // 实例化
const router = new VueRouter({
        routes
    })
    //导出
export default router