插入路由器链接到 <li> 与v-for VUE2.0

Question

我正在一个有列表菜单的项目上工作，而我尝试单击该菜单将触发subMenu列表，该菜单允许我们将链接路由到我们要显示的特定链接。 但是我做了很多研究，大多数他们写这样的书：

<ul>
  <router-link v-for="route in this.$router.options.routes" tag="li" :to="route.path">
    <a>{{ route.name }}</a>
  </router-link>
</ul>

这对我没有用，因为我需要为v-for循环分别设置路由器链接。

这个HTML的下面是我需要存档的关于child.text的router-link。

我的HTML：

ul v-show='item.expanded' class="childs">
                            <li v-for='child in item.children'>
                                <a href="#">{{child.text}}</a>
                            </li>
                        </ul>

主要JS：

const Home = resolve => require(['./components/home.vue'], resolve)
const trafficSetting = resolve => require(['./components/trafficSetting.vue'], resolve)
const seedResourcesManagement = resolve => require(['./components/seedResourcesManagement.vue'], resolve)
const driverUserManagement = resolve => require(['./components/driverUserManagement.vue'], resolve)
const whiteblackListManagement = resolve => require(['./components/whiteblackListManagement.vue'], resolve)
const VPNserverManagement = resolve => require(['./components/VPNserverManagement.vue'], resolve)
const routes = [
    {path: '/', component: Home},
    {path: '/trafficSetting', component: trafficSetting},
    {path: '/seedResourcesManagement', component: seedResourcesManagement},
    {path: '/driverUserManagement', component: driverUserManagement},
    {path: '/whiteblackListManagement', component: whiteblackListManagement},
    {path: '/VPNserverManagement', component: VPNserverManagement}
]

问题：我们如何获取来自child.text的每个数据上称为main.js路由路径的路由器链接

Answer 1

尝试这个：

<li v-for='child in item.children'>
  <a href="#" v-on:click.prevent="navigate(chidl.text)">
    {{child.text}}
  </a>
</li>

然后，在您的方法中：

navigate (to) {
  this.$router.push(to)
}

在这里查看更多详细信息