Vue-router基本學習（1）

多頁面應用:網頁HTML文件是請求後臺發過來的。每次切換頁面都會從後臺把頁面文件傳輸回來。
單頁面應用:網頁只有在第一次進入頁面的、的時候請求服務器的HTML文件，接下來的頁面跳轉是基於內部的router。
兩種應用的優缺點：

1. 多頁面應用只須要加載當前頁面所須要的資源，因此首屏時間快。可是每切換一次頁面都要去請求一次服務器資源。單頁面應用第一次要將全部的資源所有加載，因此首屏時間慢，可是後續的跳轉不須要再次向服務器發請求。
2. 多頁面應用能夠直接實現SEO搜索，可是單頁面得有一套單獨的SEO方案。
3. 單頁面能夠實現局部刷新，多頁面實現不了。

這裏稍微的講了一些單頁面和多頁面的一些知識，你們要知道 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使用。