vue.js - vue tab切换中路由配置

问题描述

问 题

<ul class="navBarList">

              <li v-for='(item,index) in     navData' :class="{cur:index==iscur}" @click="toggle(index)" v-text="item.text">{{item.text}}</li>
         </ul>
navData: [{
    text: '首页'
  }, {
    text: '增值服务'
  }, {
    text: '自助通关'
  }, {
    text: '通讯录'
  }, {
    text: '企业数据'
  }, {
    text: '设置'
  }]

我想给每个li添加一个具体的路由 调到不同的组件 应该怎样处理呢

解决方案

navData改下，要和router的配置一致：

navData: [{
    text: '首页',
    path: 'index'
  }, {
    text: '增值服务',
    path: 'path1'
  }, {
    text: '自助通关',
    path: 'path2'
  }, {
    text: '通讯录',
    path: 'path3'
  }, {
    text: '企业数据',
    path: 'path4'
  }, {
    text: '设置',
    path: 'path5'
  }]

li：

 <li v-for='(item,index) in navData' 
    :to="item.path"
    :class="{cur:index==iscur}" 
    @click="toggle(index)" 
    v-text="item.text">
 </li>

这篇关于vue.js - vue tab切换中路由配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！