Vue 路由器导航栏元素未显示 div [英] Vue Router Navbar Element not showing div
问题描述
我正在将 Vue Router 集成到导航栏中.
https://codepen.io/Teeke/pen/jOVQPWv
此代码块工作正常，并在点击时显示主页模板或关于模板.
<div><router-link to="/";class="">Home <router-link to="/about";class="">关于</router-link></模板>
左上角的主页"和关于"链接显示了正确的模板.
我添加了一个 li 元素路由器"；到主导航栏.悬停时，路由器元素不显示指针.单击时，它不会触发正确的模板.
<router-link to="/about";class="nav__menu-item">RouterAbout</router-link><li> 如何让 RouterAbout 元素触发 about 模板?
HTML 无效且
<div> 因此它实际上并未注册为应用程序的一部分.它还有一个未定义的 active 属性.将 #main 移动到 #router-app:
<导航></导航><路由器视图></路由器视图><div id="main">...这是固定的演示
I'm integrating a Vue Router into a navbar.
https://codepen.io/Teeke/pen/jOVQPWv
This codeblock works fine, and reveals either the home template, or about template on click.
<template id="navigation">
<div>
<router-link to="/" class="">Home </router-link>
<router-link to="/about" class="">About</router-link>
</div>
</template>
The links Home and About in the top left hand corner show the correct template.
I added a li element "Router" to the main navbar. On hover, the Router element doesn't show a pointer. On click, it does not trigger the correct template.
<li>
<router-link to="/about" class="nav__menu-item"> RouterAbout</router-link>
<li>
How can I make the RouterAbout element trigger the about template?
The HTML is invalid and <div id="main"> is not inside your app <div> so it's not actually registered as part of the app. It also has an undefined active prop.
Move #main into #router-app:
<div id="router-app">
<navigation></navigation>
<router-view></router-view>
<div id="main">
...
</div>
</div>
Here is the fixed demo
这篇关于Vue 路由器导航栏元素未显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
