Vue路由器导航栏元素不显示div答案

【问题标题】：Vue Router Navbar Element not showing divVue路由器导航栏元素不显示div
【发布时间】：2021-03-09 14:10:01
【问题描述】：

我正在将 Vue 路由器集成到导航栏中。

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

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

左上角的 Home 和 About 链接显示了正确的模板。

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

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

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-router

【解决方案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

【讨论】：

你的回答很有道理。我应该考虑范围和位置。公认。谢谢。