vue-router的學習

一.路由的概述。

vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，適用於構建單頁面。vue的單頁面應用是基於路由和組件的，路由是用於設定訪問路徑，並將路徑和組件映射起來。傳統的頁面應用，是用一些超連接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換

二。路由的使用

1.使用router-link標籤進行導航, to屬性表示指定的連接，router-link標籤會被渲染成a標籤。路由匹配到的組件在router-view中渲染出來，即這是路由的出口。

"router-link"屬性：

1>":to" 屬 性.至關於a標籤中的"herf"屬性，後面跟跳轉連接所用

2>"replace" 屬 性 replace在routre-link標籤中添加後，頁面切換時不會留下歷史記錄

<router-link :to="/home" replace></router-link>

3>"tag" 屬 性 具備tag屬性的router-link會被渲染成相應的標籤

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染結果 -->
<li>Home</li>

4>"active-class" 屬 性 這個屬性是設置激活連接時class屬性，也就是當前頁面全部與當前地址所匹配的的連接都會被添加class屬性。

<router-link :to="/home" active-class="u-link--Active">Home</router-link>

5>"exact" 屬 性 開啓router-link的嚴格模式

<router-link :to="/" exact>home</router-link>

HTML：
<router-link to="/one">路由</router-link>
<router-view></router-view> 
router.js:
定義路由：

  routes: [

  {

  　　path: '/one',

  　　name: 'one',

  　　component: one

  }]

　main.js: 　在main.js中須要經過router配置參數注入路由

　　new Vue({

　　el: '#app',

　　// 注入路由

　　router,

　　components: { App },

　　template: '<App/>'

　　})

2.什麼是動態路由？

可以傳遞參數的路由模式，因爲可以傳遞參數，因此對應的路由數量是不肯定的，所以叫作動態路由。

 

怎麼將參數做爲路由傳遞呢？

在參數名前面加上「:」,而後將參數寫在路由的path內。

 

路由傳參的幾種形式：params傳參、query傳參

1.<router-link :to="{name: 'dynamicOne', params: {id:222, name: 'gmn'}}">動態路由傳參形式1</router-link>

2.<router-link :to="{path:'dynamicTwo/567', query: {name: 'gmn'}}">動態路由傳遞多個參數, 經過query傳遞參數</router-link>

3.<router-link :to="{name: 'dynamicOne', params: {id:222,name:'gmn'}, query: {age: 18}}">動態路由params和query組合傳參的</router-link>

4.<router-link :to="{path:'/dynamicTwo/567?a=1'}">在path中添加?表示，傳遞的參數</router-link>

對應的定義路由的形式：

  {
      path: '/dynamicOne/:id/:name',
      name: 'dynamicOne',
      component: dynamicOne
    },
　　{
      path: '/dynamicTwo/:uid?', //「？」
      name: 'dynamicTwo',
      component: dynamicTwo
    },

　　{

　　　　path: '/dynamicOne/:id/:name?',

　　　　name: 'dynamicOne',

　　　　component: dynamicOne

　　},

params和query在路由的跳轉上，均可以用來傳遞參數，那麼。params和query的區別的區別是什麼呢？

 params和query的區別：

1》兩者的認識

params:  /router1/:id，/router1/123這裏的id叫作params

query： /router1?id=123, 這裏的id叫作query

2》 傳參

params傳參，要在路由的後面加上參數名，而且在傳參的時候，參數名要跟路由後面設置的參數名對應。

query傳參，則沒有這個限制，直接在跳轉裏面傳遞參數就行，不須要在路由的後面加上對應的參數。

params是路由的一部分,必需要有。query是拼接在url後面的參數，沒有也不要緊。

3》地址欄中的區別

params傳參在地址欄中不顯示，query傳參在地址欄中可見的。

params:

query:

 

 

知識點：：：

若是路由上面不寫參數，也能夠傳遞過去，可是不會在url上顯示你的參數，而且在跳轉別的頁面或者刷新的時候，參數就會丟失。打印結果以下：：

未刷新前：

刷新後：丟失name

3.嵌套路由（又稱爲子路由）

就是咱們在原路由的基礎上增長一個children，children是一個數組，而且咱們還須要在原來的組件上添加<router-view>來渲染children裏面的路由。

以「/」開頭的嵌套路徑會被看成根路徑，因此子路由上不用加「/」;

在生成路由時，主路由上的path會被自動添加到子路由以前，因此子路由上的path不用在從新聲明主路由上的path了。

 // 嵌套路由
    {
      path: '/father',
      name: 'father',
      component: father,
      children: [{
        path: '/father/children',
        component: children
      },
      {
        path: '/father/childrenTwo',
        component: childrenTwo
      }]
    },

4.編程式導航

在前面介紹經過router-link標籤來進行導航，還有一種方式進行導航，便是編程式導航。

就是經過寫js代碼來實現頁面的跳轉

即經過router實例的方法，進行編寫。router.push('/a')；

1>router.push  此方法將新條目推送到歷史堆棧中，點擊瀏覽器中回退安鈕時，就會回退到以前的URL;

2>router.replace此方法替換了當前的URL,與router.push的區別就是它導航而不推送到新的歷史條目。

3>router.go(n)此方法採用單個整數做爲參數，指示在歷史堆棧中前進或後退的步數。整數表示前進，負數表示後退

      // 編程式路由
      route.push('/one')
      // 編程式路由傳參params
      route.push({name: 'dynamicOne', params: {id:111}})
      // 編程式路由傳參query
      route.push({name: 'dynamicTwo', params: {uid:'3333'}, query: {name:'gmn'}})

5.命名路由

給路由定義不一樣的名字，根據名字進行匹配。給不一樣的router-view定義名字，router-link經過名字進行對應組件的渲染。經過「name」表示路由的名字。

<router-link :to="{name: 'dynamicOne', params: {id:222,name:'gmn'}}">動態路由傳參params</router-link>


    {
      path: '/dynamicOne/:id/:name',
      name: 'dynamicOne', //命名路由
      component: dynamicOne
    },

6.命名視圖

給不一樣的router-view定義不一樣的名字，經過名字進行對應組件的渲染。意義在於在界面中擁有多個單獨命名的視圖，而不是隻有一個單獨的出口。若是router-view滅有設置名字，那麼默認爲default。

<router-view/>
<router-view name="view"></router-view>
<router-view name="viewTwo"></router-view>

// 同級視圖
    {
      path: '/view',
      components: {
        default: one,
        view: view,
        viewTwo: viewTwo
      }
    },

7.重定向和別名

重定向的意思是：從新定義路由的跳轉，好比，默認是跳轉到  ‘/a’，重定向到 ‘ /b’,意思就是 跳轉到a 的時候 直接跳轉到b。

重定向的目標能夠是一個命名的路由。也能夠是 動態返回重定向目標。

<router-link :to="{name:'/two', params: {id: '111'}}">
 重定向傳參
 </router-link>


   // 重定向,別名
    {
      path: '/two',
      // redirect: '/father', 
      // redirect: {name: 'father'}, // name
      // redirect: '/dynamicOne/:id', //傳參
      redirect: to => {
        return '/father' //動態重定向
      },
      name: '/two',
      component: two,
    }

別名：就是 至關於 給路由起的 小名兒，

「別名」的功能讓你能夠自由地將 UI 結構映射到任意的 URL，而不是受限於配置的嵌套由。用alias屬性表示

<router-link to="/na">別名</router-link>

{
      path: '/two',
      component: two,
      alias: '/na'
    }

8.History模式

vue-router默認Hash模式，使用URL的hash來模擬一個完整的URL，URL改變，頁面不會從新加載。可是正常狀況下來講，當url改變，頁面是必定會更換的。只有更換url中的查詢字符串和hash值得時候纔不會從新加載頁面。例如

 

可是這種#形式不美麗，也爲了解決 更改地址後頁面從新渲染的頁面的問題，全部就有了history模式的出現，

改變後的路徑：就看着 很美麗了。

可是

這種模式須要後臺配置的支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404，這就很差看了。

 

9.路由元： meta字段。用來攜帶一些隱藏信息，好比判斷是否登陸

{
      path: '/one',
      name: 'one',
      component: one,
      meta: {require: true}
}

使用，在one.vue中this.$route中查到這個字段，具體以下：

10.路由懶加載：

什麼是懶加載呢？懶加載也叫作延遲加載，即在須要的時候進行加載，隨用隨載。

爲何須要懶加載呢？當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載。

const one = () => import('@/components/One')
{
      path: '/one',
      name: 'one',
      component: one,
      meta: {require: true}
},

11.路由的生命週期

全局守衛： 1.router.beforeEach:全局前置守衛，進入路由以前。2,。router.beforeResolve:全局解析守衛，在beforeRouterEnter調用以後調用。3.router.afterEach 全局後置鉤子 進入路由以後

1>全局前置守衛::::::當一個導航觸發時，全局前置守衛按照建立順序調用。守衛是異步解析執行，此時導航在全部守衛 resolve 完以前一直處於 等待中。

有三個參數：

to表示即將進入目標的路由對象， from表示當前導航正要離開的路由。next:Function必定要調用這個方法來resolve這個鉤子。

next函數有四種形式：
next(): 進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

next(false): 中斷當前的導航。若是瀏覽器的 URL 改變了 (多是用戶手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到  from 路由對應的地址。

next('/') 或者  next({ path: '/' }): 跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。

next(error):若是傳入  next 的參數是一個  Error 實例，則導航會被終止且該錯誤會被傳遞給  router.onError() 註冊過的回調。

 

確保要調用 next 方法，不然鉤子就不會被 resolved。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  if(to.name == "one"){
    next();
  }
  else if(to.path != "/"){
    next("/");
  }
  else{
    next(); 
  }
})

2>全局解析守衛：：：： 和router.beforeEach()相似，區別是在導航被確認以前，同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用。

3>全局後置鉤子：這個沒有next函數

router.afterEach((to, from) => {
  // ...
})

4>路由獨享的守衛 ：就是在路由配置上直接定義beforeEnter守衛

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

5.組件內的守衛： 在路由組件中直接定義如下路由導航守衛。

beforeRouteEnter： 在渲染該組件的對應路由被confirm前調用， 不能獲取組件實例this,由於當守衛執行前，組件實例還沒被建立。

beforeRouteUpdate ：在當路由改變，可是該組件被複用時調用，好比在動態路由中，在one/1, one/2之間轉換的時候，因爲會渲染一樣的one組件，所以，組件實例會被複用，而這個鉤子就會在這種狀況下調用，能夠訪問this

beforeRouteLeave：導航離開該組件對應的路由時調用，能夠訪問this。

6.整個路由守衛被觸發流程的步驟：

• 導航被觸發。
• 在失活的組件裏調用離開守衛。
• 調用全局的 beforeEach 守衛。
• 在重用的組件裏調用 beforeRouteUpdate 守衛 。
• 在路由配置裏調用 beforeEnter。
• 解析異步路由組件。
• 在被激活的組件裏調用 beforeRouteEnter。
• 調用全局的 beforeResolve 守衛 (2.5+)。
• 導航被確認。
• 調用全局的 afterEach 鉤子。
• 觸發 DOM 更新。
• 用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

 

·