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 lang="less">
	
	*{
		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的正常显示了。