Vue-router基本學習（1）
多頁面應用 :網頁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 使用。