Question

我正在将 Vue Router 集成到导航栏中。

此代码块工作正常，并在点击时显示主页模板或关于模板。

<template id="navigation">
  <div>
    <router-link to="/"  class="">Home </router-link>
    <router-link to="/about"  class="">About</router-link>      
  </div>
</template>

左上角的“主页”和“关于”链接显示了正确的模板。

我在主导航栏中添加了一个 li 元素“路由器”。悬停时，路由器元素不显示指针。单击时，它不会触发正确的模板。

<li>
  <router-link to="/about" class="nav__menu-item"> RouterAbout</router-link>
<li>

如何让 RouterAbout 元素触发 about 模板？

Answer 1

HTML 无效且 <div id="main"> 不在您的应用程序 <div> 中，因此它实际上并未注册为应用程序的一部分。它还有一个未定义的 active 属性。

将 #main 移到 #router-app：

<div id="router-app">
  <navigation></navigation>
  <router-view></router-view>

  <div id="main">
  ...
  </div>
</div>

这是固定的 demo

Vue 路由器导航栏元素未显示 div

1 个答案: