vue应用多模板写法

介绍

一个应用往往不止有一个模板布局。比如，登录页是一种模板，登录后是一种模板。如果应用更加复杂，这时候就体现出来了多模板布局的重要性。

实现方式

在路由设置中将对应组件页面设置成对应模板的子路由就可以达到效果。

router.js

new router({
	routes: [
		{
			path: '/',
			compontent: () => import('@/layout/default/Index.vue'),
			children: [
				{
					path: '/',
					compontent: () => import('@/view/Home.vue')	
				},
				...
			]
		},
		{
			path: '/login',
			compontent: () => import('@/layout/login/Index.vue'),
			children: [
				{
					path: '/login',
					compontent: () => import('@/view/login/Index.vue')	
				},
				...
			]
		}	
	]
})

对应的模板文件（如：@/layout/default/Index.vue文件）

<template>
	...
	<router-view /> // 其他的按你的需求写，千万记住要加上这个标签，要不然子路由的内容渲染不出来。
	...
</template>

效果图