美文网首页
vue v-for循环生成router-link,含可用路由

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

作者: 红烧肉在锅里呀 | 来源:发表于2019-03-21 11:16 被阅读0次

使用循环来完成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'},
           ]
        }
    }
  }

}

效果图

相关文章

网友评论

      本文标题:vue v-for循环生成router-link,含可用路由

      本文链接:https://www.haomeiwen.com/subject/yrfqvqtx.html