Vue js起始页中的页脚
Posted
技术标签:
【中文标题】Vue js起始页中的页脚【英文标题】:Footer in Vue js start page 【发布时间】:2021-10-12 10:09:17 【问题描述】:我需要在 Vue js 项目主页添加页脚。但它不起作用,我对 vue 不太了解,我是初学者。
I need to add footer to this page
这是我的页脚组件:
<template>
<footer>
</footer>
</template>
<style scoped>
footer
display: flex;
background-color: #42b942;
height: 50px;
width: 100%;
position: fixed;
</style>
这是我在 App.vue 中的代码:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
import footer from '@/components/footer.vue';
export default
name: "footer",
components:
footer
</script>
<style>
#app
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
#nav
padding: 30px;
#nav a
font-weight: bold;
color: #2c3e50;
#nav a.router-link-exact-active
color: #42b983;
</style>
vue项目打开页面获取footer有哪些变化。
【问题讨论】:
【参考方案1】:您尚未在应用模板中的任何位置放置页脚组件。当您导入另一个具有相同名称的组件时,也不要将您的应用命名为“页脚”。
假设您希望页脚在应用的所有页面上都可见,请尝试像这样修改它:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<footer/> <!-- Here we place the footer -->
</div>
</template>
<script>
import footer from '@/components/footer.vue';
export default
name: "myApp", // Renaming the app so it won't conflict with the child component
components:
footer
</script>
<style>
#app
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
#nav
padding: 30px;
#nav a
font-weight: bold;
color: #2c3e50;
#nav a.router-link-exact-active
color: #42b983;
</style>
【讨论】:
它不工作。页面没有变化。页脚不可见。 是不是因为你的footer.vue
组件模板是空的?尝试在其中放置一些文本。
是的,我修改了 footer.vue。还是没有变化
amith
这样我改了【参考方案2】:这是 App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<footer/>
</div>
</template>
<script>
import footer from '@/components/footer.vue';
export default
name: "myApp",
components:
footer
</script>
<style>
#app
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
#nav
padding: 30px;
#nav a
font-weight: bold;
color: #2c3e50;
#nav a.router-link-exact-active
color: #42b983;
</style>
【讨论】:
【参考方案3】:您在其中一个回复中说,修改后您的 footer.vue 看起来像这样,但是您的样式将转到模板中不存在的 html 标签页脚,因此可能是组件页脚显示在 App.js 中。 vue 但不是作为页脚而是只有“amith”这个词
<template>
<div>
<p>amith</p>
</div>
</template>
<style scoped>
footer
display: flex;
background-color: #42b942;
height: 50px;
width: 100%;
position: fixed;
</style>
所以也许改变它这样做:
<template>
<footer>
<div>
<p>amith</p>
</div>
</footer>
</template>
<style scoped>
footer
display: flex;
background-color: #42b942;
height: 50px;
width: 100%;
position: fixed;
</style>
还要在导入中更改页脚组件名称,因为名称与 ta 相同时会出现问题
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<footerComp /> <!-- Here we place the footer -->
</div>
</template>
<script>
import footerComp from '@/components/footer.vue';
export default
name: "myApp", // Renaming the app so it won't conflict with the child component
components:
footerComp
</script>
<style>
#app
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
#nav
padding: 30px;
#nav a
font-weight: bold;
color: #2c3e50;
#nav a.router-link-exact-active
color: #42b983;
</style>
【讨论】:
我改成你建议的方式,然后页面也没有变化。和图片一样,我分享的。有没有其他方法可以解决这个问题,请您帮忙。 @AmithBino 另外我认为导入组件的名称与真实标签相同会产生问题。我用更改后的代码更新了我的答案。 是的,它奏效了。非常感谢您的帮助以上是关于Vue js起始页中的页脚的主要内容,如果未能解决你的问题,请参考以下文章