Vue路由配置-声明式导航

目录结构

tabbar.vue（为了美观调整为弹性布局）

<template>
	<nav>
		<ul>
			<!-- 	<li><router-link to="/cinema">Cinema组件</router-link></li> 效果同下一句-->
			<!--声明式导航-->
			<router-link to="/cinema" tag="li">Cinema组件</router-link>
			<router-link to="/film" tag="li">Film组件</router-link>
			<router-link to="/center" tag="li">Center组件</router-link>
		</ul>
	</nav>
</template>

<script>

</script>

<style>
	ul {
		display: flex;
	}

	li {
		flex-grow: 1;
	}
</style>

app.vue

<template>
	<div id="app">
		<!--引入tabbar组件-->
		<tabbar></tabbar>
		<!--路由容器-->
		<router-view></router-view>
	</div>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		// components 组件注册
		components: {
			tabbar
		},
		// data() 初始化数据，为变量赋值等
		data() {
			return {

			}
		}
	}
</script>

<style>

</style>

演示效果，点击对应组件跳转至对应组件路由