vue v-for循环生成router-link,含可用路由

使用循环来完成router-link的生成,并可以实现界面的路由

<p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)">

    <router-link :to="{ path: operate.path }">
        {{operate.name}}
    </router-link>
    <i class="el-icon-arrow-right right"></i>
</p>
  export default {
  name: 'HelloWorld',
  data () {
    return {
        navTo:{
            "operate":[
                  {"name":"系统1","path":'/header'},
                  {"name":"系统2","path":'/HelloWorld/engine'},
           ]
        }
    }
  }

}

效果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容