首页 文章

Vue路由器连接儿童的孩子

提问于
浏览 次
1

我目前正试图让这个东西与Vue Router一起工作 .

目标是：如果单击Nav＃1，则应显示包含另一个预选SubNav＃1的Router-Link的Component .

我可以通过单击导航＃1的方式使其工作，出现具有已经激活的类的具有SubNav＃1的组件 . 问题是Nav＃1中的活动类被删除，无法导航到Nav＃2或N＃3 . 如果我点击导航＃2或＃3的路由器链接没有任何反应......

routes.js：

{ path: '/app', component: App,
    children: [
      { path: 'Nav#1', component: Nav#1_Content,
        children: [
          { path: 'SubNav#1', component: SubNav#1_Content},
          { path: 'SubNav#2', component: SubNav#2_Content}
        ]},
      { path: 'Nav#2', component: Nav#2_Content},
      { path: 'Nav#3', component: Nav#3_Content},
    ]}

新VueRouter实例中的自定义linkActiveClass .

导航组件：

<router-link to="Nav#1/SubNav#1">Nav #1</router-link>
<router-link to="Nav#2">Nav #2</router-link>
<router-link to="Nav#3">Nav #3</router-link>

Nav＃1_Content组件：

<template>
  <div>
   <nav>
     <router-link to="SubNav#1" tag="div">SubNav#1</router-link>
     <router-link to="SubNav#2" tag="div">SubNav#2</router-link>
   </nav>
   <router-view></router-view>
  </div>
</template>

enter image description here

javascript css routing vue.js vue-router

1 回答

  • 0

    在 <router-link> 标记上为 to prop指定值时，您将指定要转到的路径的确切路径 .

    由于您的所有示例路径都位于 /app 根路径下，因此我不确定您是如何使这些链接起作用的 .

    也就是说，您需要摆脱路径路径定义中的 # 标志 . 当提供Vue路由器的路径时，它会在 # 符号后删除任何内容并将其保存为 $route.hash 值 .

    因此，请使用 to 道具中的完整路径名称作为' tags and drop the ＃'标志 .

    Here's a working fiddle.

    回复于

相关问题