多頁面應用:網頁HTML文件是請求後臺發過來的。每次切換頁面都會從後臺把頁面文件傳輸回來。單頁面應用:網頁只有在第一次進入頁面的、的時候請求服務器的HTML文件，接下來的頁面跳轉是基於內部的router。
兩種應用的優缺點：
- 多頁面應用只需要加載當前頁面所需要的資源，所以首屏時間快。但是每切換一次頁面都要去請求一次服務器資源。單頁面應用第一次要將所有的資源全部加載，所以首屏時間慢，但是後續的跳轉不需要再次向服務器發請求。
- 多頁面應用可以直接實現SEO搜索，但是單頁面得有一套單獨的SEO方案。
- 單頁面可以實現局部刷新，多頁面實現不了。
這裏稍微的講了一些單頁面和多頁面的一些知識，大家要知道 Vue 是一個單頁面應用，其頁面的跳轉需要通過路由：Vue-router!!! vue-router的安裝我們已經在前面的文章裏講過了，今天這篇文章就講vue-router的使用。
基本使用
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Childs1 from '@/components/Childs1'
import Childs2 from '@/components/Childs2'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path:'/parent',
name:'Parent',
component:Parent
},
{
path:'/child1',
name:'Childs1',
component: Childs1
},
{
path: '/child2',
name:'Childs2',
component:Childs2
}
]
})運行結果如下圖：
我們輸入不同的路由不同的組件被渲染出。首先我們將需要在路由裏面渲染的組件引入，然後配置路由。path:是我們需要配置的路徑名，component： 是我們需要在該路徑下渲染的組件。
路由嵌套
我們在開發的過程中不應該只有一級路由。比如上面的例子，child應該放在`parent的下面，name我們將怎麼樣實現路由的嵌套呢？
當然是用路由嵌套啦~
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Childs1 from '@/components/Childs1'
import Childs2 from '@/components/Childs2'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path:'/parent',
name:'Parent',
component:Parent,
children: [
{path:'child1', component: Childs1},
{path:'child2', component: Childs2}
]
}
]
})Parent.vue
<template>
<div>
Parent
<router-view> </router-view>
</div>
</template>運行結果如下圖：Parent.vue 的 <router-view> </router-view>是渲染其組路由組件的地方。我們可以看到url爲/parent的時候，頁面上只有paernt的字符串，當我們路由爲兩層的時候，parent和child全部展示在頁面上。vue-router 會根據不同的路由加載不同的組件。
動態路由
如果我們要將某一種模式下的路由全部映射到同一個組件上，比如我們要將'/user/tom' 和 '/user/David' 都匹配到同樣組件下面，那麼動態路由是我們不二的選擇。
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Parent from '@/components/Parent'
import Childs1 from '@/components/Childs1'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path:'/parent',
name:'Parent',
component:Parent,
children: [
{path: 'child1/:name', component:Childs1}
]
}
]
})Parent.vue
<template>
<div>
Parent
<router-view></router-view>
</div>
</template>Childs1.vue
<template>
<div>
Childs1-- -{{$route.params.name}}
</div>
</template>運行結果如下圖：
我們雖然在/child1後面輸入不同的路徑，但是最後全部映射到同一個組件上。this.$route.params對象存放我們的動態路由的內容。
動態路由引起的組件複用
動態路由就是將不同的路由映射到同一個組件上，如果兩個路由是匹配到同一組件，那麼Vue不會將當前組件銷燬重建，而是直接替換不一樣的內容，實現組件的複用。
src/router/index.js
同上
Parent.vue
<template>
<div>
Parent
<router-view></router-view>
</div>
</template>Childs1.vue
<template>
<div>
Childs1-- -{{$route.params.name}}
<button @click="change">點我去aa</button>
</div>
</template>
<script>
export default {
name:'Childs1',
data(){
return{
title: 1
}
},
methods:{
change(){
this.$router.push('/parent/child1/aa' + this.title++);
}
},
mounted(){
console.log('child1 mounted',new Date().toLocaleString());
}
}
</script>運行結果如下圖：
我們使用編程式導航來進行路由切換，title的初始值唯一，在我們點擊按鈕進行頁面切換的時候，title沒有變成初始值，而是複用了前一個頁面的組件，在原來的基礎上自增。第二章圖片也顯示，只有第一次進入的時候進入了生命週期鉤子，以後的頁面切換不再進入鉤子。
編程式導航和聲明式導航
編程式導航是調用方法push進行路由跳轉，聲明式導航是類似於a標籤一樣的<router-link to='/parent'></router-link>的標籤進行跳轉。to屬性的內容就是我們要跳轉的目標路由。聲明式導航最終渲染到頁面也是a標籤。
聲明式導航在被點擊的時候會調用編程式導航的方法。
Parent.vue*
<template>
<div>
<ul>
<router-link to='/parent/child1/bb'>
<li>點我去bb</li>
</router-link>
<router-link to='/parent/child1/cc'>
<li>點我去cc</li>
</router-link>
<router-link to='/parent/child1/dd'>
<li>點我去dd</li>
</router-link>
</ul>
<router-view></router-view>
</div>
</template>Childs1.vue
同上
運行結果如下圖：
li的外面包裹着router-link，當我們點擊的時候，路由就會跳轉到我們to指向的URL，我們點擊按鈕的時候，調用了'this.$router.push（url）'方法來進行跳轉。這兩種方法沒有好與壞的區別，只是使用於不同的場景。
router.push()
push往history棧中加入一條記錄，所以當我們使用瀏覽器的後退按鈕時，還能夠回到這一頁。
router.replace()
replace是替換棧中當前頁的記錄，意味着history棧中不會再有當前頁的記錄。這種方法通常用來授權頁，這樣就不會有二次授權的情況出現。
router.go()
go是告訴瀏覽器在history棧中前進或者後退幾步，所以我們一般的頁面跳轉用push才能在棧中新增一條記錄，便於go使用。