javascript - Vue加载标题组件两次
问题描述
我正在构建一个简单的 vue 应用程序,但遇到了一个奇怪的问题,即我的标签中的组件在标签内第二次呈现。
最初, 和 组件不在标题标签中,但它们出现在组件下方。
应用程序.vue
<template>
<div id="app">
<header><app-logo/><nav-bar/></header>
<section class="container">
<router-view/>
</section>
</div>
</template>
<script>
import AppLogo from './components/AppLogo.vue'
import Home from './components/Home.vue'
export default {
name: 'App',
components: {
Home,
AppLogo
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
导航栏组件:
<template>
<div>
<h1> TFJS/Vue Examples </h1>
<div v-for="page in pages" v-bind:key="page">
<div>
<div>
<router-link to='/basic-logistic-regression'> {{ page }} </router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pages: ['/BasicLogisticRegression']
}
}
}
</script>
我想让导航栏组件始终出现在路由器视图上方。
解决方案
我通过使用名为 loadHome() 的挂载方法解决了这个问题,该方法使用 this.$router.push('/home') 以编程方式强制路由器视图加载主页组件。
这是代码
应用程序.vue
<template>
<div id="app">
<div class="routing">
<header><app-logo/><nav-bar/></header>
</div>
<section class="container">
<router-view/>
</section>
</div>
</template>
<script>
import AppLogo from './components/AppLogo.vue'
import NavBar from './components/NavBar.vue'
import Home from './components/Home.vue'
export default {
name: 'App',
components: {
Home,
AppLogo,
NavBar
},
methods: {
loadHome: function(){
this.$router.push('/home')
}
},
mounted: function(){
this.loadHome()
}
}
</script>
推荐阅读
- html - 如何在 Python 中使用 Selenium Webdriver 提取 webelement
- c# - 如何在 Unity 中跳转?
- sql-server - 是否有 SQL Server 批量插入错误的日志?
- python - django过滤器让父母到孩子
- javascript - 在他们的月份对象中获取两天之间的所有天数
- javascript - Uint8Array 中的数字是多少?斑点
- php - 如何回声
- c++ - 如何在 C++ 上执行 FreeConsole() 但更快
- spring - JPA 问题 @OneToMany(MappedBy)
- java - 用于 Cloudinary 上传的 Spring @Async 不起作用 - 程序无异常停止