simple-web/frontend/web/src/App.vue

<template>
	<div id="app">
		<div class="menu">
			<ul>
				<li><router-link to="/" exact>Home</router-link></li>
				<li><router-link to="test">Test</router-link></li>
			</ul>
		</div>
		<div class="main">
			<h1>{{ $route.name }}</h1>
			<div class="route-container">
				<router-view></router-view>
			</div>
			<small>v5</small>
		</div>
	</div>
</template>

<script>
	export default {
		name: "app"
	}
</script>

<style lang="stylus">
	@import "assets/mixin.styl"
	@import "assets/style.styl"

	* 
		box-sizing:border-box

	body 
		padding:0px
		margin:0px

	#app 
			font-family: 'Avenir', Helvetica, Arial, sans-serif
			-webkit-font-smoothing: antialiased
			-moz-osx-font-smoothing: grayscale
			height:100vh
			display:flex
			flex-direction:row
			color: #2c3e50

	.main 
		padding-top:100px
		padding:10px
		flex-grow:1
		display:flex
		flex-direction:column
		.route-container
			padding:20px
			flex-grow:1

	.menu 
		padding-top:120px
		flex-basis:250px
		background:#555
		color:#FFF
		ul 
			list-style-type:none
			margin:0px
			padding:0px
			li a 
				display:block
				padding:18px 20px
				text-align:center
				text-decoration: none
				color: #EFEFEF
				&.router-link-active
					//linear_gradient(left,#555,#fff)
					background:#FFF
					color:#222
				&:hover:not(.router-link-active)
					background: #F53
</style>