vue寫一個底部導航欄

實作的最終結果如上圖。

<template>
	<div id="app">
	  <div id="router-view">
		  <router-view/>
	  </div>
		
		<div id="nav">
			<div><router-link to="/">Home1</router-link></div>
			<div><router-link to="/shop">Shop</router-link></div>
			<div><router-link to="/mine">Mine</router-link></div>
			<div><router-link to="/search">search</router-link></div>
		</div>
	</div>
</template>
           

由于

<template>

标簽下隻能有一個子分支，是以我們用

<div>

将其圈起來.

其下有兩個子分支，一個是

router-view

，用來顯示不同的頁面，另一個是

nav

，用來作為底部導航欄。

我們将下面的4個部件也都分别用

<div>

圈起來，為以後在裡面加入圖檔等元素做準備。

然後開始css。

<style >
	
	*{
		border: 0;
		margin: 0;
		padding: 0;
	}
	#nav{
		width: 100%;
		height: 50px;
		display: flex;
		bottom: 0;
		position: fixed;
		div{
			flex:1;
			background-color: lightblue;
			margin: 1px;
			text-align: center;
			line-height: 50px;
		}
	}
	#router-view{
		background-color: pink;
		height: calc(100vh - 50px);
		overflow: auto;
	}
</style>
           

這裡面，我們将

nav

的

position

設定為

fixed

，使其固定。display設定為

flex

，為彈性布局，

bottom

設定為0，使其在底部。

由于僅僅做此設定，會使底部導航欄擋住

router-view

的正常顯示，是以我們要擷取目前頁面的總像素的高，用

calc(100vh)

擷取，減掉我們設定的導航欄的高度50px，就不會影響

router-view

的正常顯示了。