Layout 和 嵌套路由
回顾一下默认项目代码，App.vue 里在router-view上边有一行img引入了vue 的logo图片
如果我们项目足够的简单，比如只有一种layout，我们大可以在App.vue里就做好布局，
但是我们要做的项目有2种layout，那么我们可以理解为App.vue 渲染的是整页，啥也没有的，在这里去渲染那2种layout布局。
我们先实现这个
先删掉 App.vue 里的 <img src="./assets/logo.png">
还有下边的样式，看起来没啥鸟用，一会我们自己写
先定义2个layout
在src\layouts目录创建 Login.vue 和 BaseAdmin.vue
// Login.vue
<template>
<div>login</div>
</template>
// BaseAdmin.vue
<template>
<div>
admin
</div>
</template>
修改router指向它们
这时我在浏览器修改url去访问报了404，应该是哪里有问题，这个对开发没影响的可以暂时不管，先让项目进行下去，空的时候再研究，先注释掉 routes 那的mode配置
router的完整代码
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BaseAdmin from '@/layouts/BaseAdmin'
import Login from '@/layouts/Login'
Vue.use(Router)
const MyHelloWorld = {
template: '<div><my-title title="我是标题">我是变的<br>我也是<hr>我还是</my-title><router-link to="/hello">goto hello</router-link></div>'
}
const MyTitle = {
template: '<div><h1 style="background-color: #ccc"></h1><slot/></div>',
props: ['title']
}
Vue.component('my-title', MyTitle)
export default new Router({
// mode: 'history',
routes: [
{
path: '/',
name: 'MyHelloWorld',
component: MyHelloWorld
},
{
path: '/admin',
name: 'BaseAdmin',
component: BaseAdmin
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
}
]
})
这时我们对url /#/admin 和 /#/login 访问去看生效情况，
然后接下来就是去把这两个页面做的像那么点样子出来
// Login.vue
<template>
<div>
<h1>用户登陆</h1>
<form>
<label>
用户名
<input name="username" />
</label>
<label>
密码
<input name="password" type="password" />
</label>
<p>
<router-link :to="{name: 'BaseAdmin'}">登陆</router-link>
</p>
</form>
</div>
</template>
点了登陆就可以跳去admin页，先这么写，一会再来完善它，不能男女搭配就自己来控制节奏吧，
我是习惯先写一轮html，再写一轮css，反复反复直到需要花精力去完善一个具体的功能页面，
先按照我的习惯来撸一轮html
// BaseAdmin.vue 在baseAdmin里再放一个router-view来做嵌套路由
<template>
<div>
<header>
logo
</header>
<section>
<aside>左侧菜单</aside>
<section>
<router-view></router-view>
</section>
</section>
</div>
</template>
修改路由给admin增加children
{
path: '/admin',
name: 'BaseAdmin',
component: BaseAdmin,
children: [
{
path: '',
name: 'adminHello',
component: MyHelloWorld,
}
]
},
页面看起来这个样子，先不考虑排版，查看一下dom结构是我们想要的样子
image
我们来排下版，让页面看起来更直观
<template>
<div>
<header>
logo
</header>
<aside>左侧菜单</aside>
<section class="main">
<router-view></router-view>
</section>
</div>
</template>
<style scoped>
header {
background-color:#123;
height: 50px;
line-height: 50px;
position:absolute;
top:0;
left:0;
right:0;
color:#fff;
}
.main {
position: absolute;
left: 200px;
top: 50px;
right: 0;
bottom: 0;
overflow: hidden;
}
aside {
width:200px;
background-color: #234;
color: #fff;
position:absolute;
top:50px;
left:0;
bottom:0;
}
</style>
image
是不是有那么点样子了，接下来我们新增加几个导航链接
<template>
<div>
<header>
logo
</header>
<aside>左侧菜单
<ul>
<li>
<router-link :to="{name:'adminDaohang1'}">导航菜单一</router-link>
</li>
<li>
<router-link :to="{name:'adminDaohang2'}">导航菜单二</router-link>
</li>
</ul>
</aside>
<section class="main">
<router-view></router-view>
</section>
</div>
</template>
修改路由，还记得之前定义的MyTitle组件么，现在我们要再路由里给它传值
{
path: '/admin',
name: 'BaseAdmin',
component: BaseAdmin,
children: [
{
path: '',
name: 'adminHello',
component: MyHelloWorld
},
{
path: 'daohang1',
name: 'adminDaohang1',
component: MyTitle,
props: {title: "导航1"}
},
{
path: 'daohang2',
name: 'adminDaohang2',
component: MyTitle,
props: {title: "导航2"}
}
]
},
在浏览器里测试一下效果吧。
最后别忘了提交代码到git仓库
$ git add .
$ git commit -a -m "chapter5"
这次我们还有给代码打个tag，这样以后我们可以很方便的穿越到这一节的代码状态
$ git tag chapter5
