Vue 路由嵌套（children嵌套）

嵌套路由就是路由里面嵌套他的子路由，可以有自己的路由导航和路由容器（router-link、router-view）

通过配置children可实现多层嵌套。

app.vue

<template>
	<div id="app">
		<router-link to="/login">登录</router-link>
		<router-link to="/main">成功页面</router-link>
		<router-view/>
	</div>
</template>

<script>
//定义了App组件  export 导出组件,只有 export 导出了,别的组件才可以import导入
	export default {
	  name: 'app'
	}
</script>

index.js

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */

//导入自己定义的组件
import Login from '../view/Login.vue';
import Main from '../view/Main.vue';
import Admin from '../view/admin/Admins.vue';
import Role from '../view/role/Roles.vue';

Vue.use(router);

//定义路由组件
var rout = new router({
	routes: [
		{
			path: '/login',
			name: 'login',
			component: Login
		},
		{
			path: '/main',
			component: Main,//路由嵌套 在main下面的嵌套子路由
			children:[
				{
					path:"/admin",
					component:Admin
				},
				{
					path:"/role",
					component:Role
				}
			]
		}
	]
});

//导出路由组件
export default rout;

login.vue

<!-- 
	在Vue中没有页面的概念,只有组件概念 Login.vue文件就是一个登陆组件
	<template> 标签里面必须有一个根标签
 -->
<template>
	<div>
		login
	</div>
</template>

<script>
	export default {
		data: function() {
			return {

			}
		},
		methods: {

		}
	}
</script>

main.vue

<template>
	<div>
		main
	</div>
</template>

<script>
	export default {
		data: function() {
			return {

			}
		},
		methods: {

		}
	}
</script>

嵌套路由通过配置children可实现多层嵌套.