回顧一下默認(rèn)項(xiàng)目代碼，App.vue 里在router-view上邊有一行img引入了vue 的logo圖片
如果我們項(xiàng)目足夠的簡(jiǎn)單肥矢，比如只有一種layout，我們大可以在App.vue里就做好布局认臊，
但是我們要做的項(xiàng)目有2種layout扳炬，那么我們可以理解為App.vue 渲染的是整頁，啥也沒有的蝙眶，在這里去渲染那2種layout布局凰萨。
我們先實(shí)現(xiàn)這個(gè)
先刪掉 App.vue 里的 <img src="./assets/logo.png">
還有下邊的樣式，看起來沒啥鳥用械馆，一會(huì)我們自己寫
先定義2個(gè)layout
在src\layouts目錄創(chuàng)建 Login.vue 和 BaseAdmin.vue
// Login.vue
<template>
<div>login</div>
</template>
// BaseAdmin.vue
<template>
<div>
admin
</div>
</template>
修改router指向它們
這時(shí)我在瀏覽器修改url去訪問報(bào)了404胖眷，應(yīng)該是哪里有問題，這個(gè)對(duì)開發(fā)沒影響的可以暫時(shí)不管霹崎，先讓項(xiàng)目進(jìn)行下去珊搀，空的時(shí)候再研究，先注釋掉 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="我是標(biāo)題">我是變的<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
}
]
})
這時(shí)我們對(duì)url /#/admin 和 /#/login 訪問去看生效情況尾菇，
然后接下來就是去把這兩個(gè)頁面做的像那么點(diǎn)樣子出來
// 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>
點(diǎn)了登陸就可以跳去admin頁境析，先這么寫，一會(huì)再來完善它派诬，不能男女搭配就自己來控制節(jié)奏吧劳淆，
我是習(xí)慣先寫一輪html，再寫一輪css默赂，反復(fù)反復(fù)直到需要花精力去完善一個(gè)具體的功能頁面沛鸵，
先按照我的習(xí)慣來擼一輪html
// BaseAdmin.vue 在baseAdmin里再放一個(gè)router-view來做嵌套路由
<template>
<div>
<header>
logo
</header>
<section>
<aside>左側(cè)菜單</aside>
<section>
<router-view></router-view>
</section>
</section>
</div>
</template>
修改路由給admin增加children
{
path: '/admin',
name: 'BaseAdmin',
component: BaseAdmin,
children: [
{
path: '',
name: 'adminHello',
component: MyHelloWorld,
}
]
},
頁面看起來這個(gè)樣子，先不考慮排版缆八，查看一下dom結(jié)構(gòu)是我們想要的樣子
我們來排下版曲掰，讓頁面看起來更直觀
<template>
<div>
<header>
logo
</header>
<aside>左側(cè)菜單</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>
是不是有那么點(diǎn)樣子了，接下來我們新增加幾個(gè)導(dǎo)航鏈接
<template>
<div>
<header>
logo
</header>
<aside>左側(cè)菜單
<ul>
<li>
<router-link :to="{name:'adminDaohang1'}">導(dǎo)航菜單一</router-link>
</li>
<li>
<router-link :to="{name:'adminDaohang2'}">導(dǎo)航菜單二</router-link>
</li>
</ul>
</aside>
<section class="main">
<router-view></router-view>
</section>
</div>
</template>
修改路由奈辰，還記得之前定義的MyTitle組件么栏妖，現(xiàn)在我們要再路由里給它傳值
{
path: '/admin',
name: 'BaseAdmin',
component: BaseAdmin,
children: [
{
path: '',
name: 'adminHello',
component: MyHelloWorld
},
{
path: 'daohang1',
name: 'adminDaohang1',
component: MyTitle,
props: {title: "導(dǎo)航1"}
},
{
path: 'daohang2',
name: 'adminDaohang2',
component: MyTitle,
props: {title: "導(dǎo)航2"}
}
]
},
在瀏覽器里測(cè)試一下效果吧。
最后別忘了提交代碼到git倉庫
$ git add .
$ git commit -a -m "chapter5"
這次我們還有給代碼打個(gè)tag奖恰，這樣以后我們可以很方便的穿越到這一節(jié)的代碼狀態(tài)
$ git tag chapter5
