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循环设置router-link。

这个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)
}

查看更多详情here

使用v-for VUE2.0将路由器链接插入<li>时出现问题

1 个答案: