vue2.0 vue-router學習筆記

最近在學習vue.js 2.x。vue-router是其中十分重要的一部分。

在以前的學習中，用過很多後端的路由，比如在laravel框架中，路由的功能是根據前端不同的URL請求，根據路由匹配將請求分發到不同的中介軟體、方法等。而vue-router是一個前端路由，即是根據不同的路徑來決定該載入什麼元件。

vue-router的安裝：如果在初始化vue-cli的時候，安裝了vue-router，就不用重複安裝。如果未安裝，切換至專案目錄下，輸入npm install vue-router --save，安裝完成。

vue-router的使用：

第一步、首先需要引入並使用該全域性元件。如下：

import Router from 'vue-router'
Vue.use(Router)

第二步、初始化router例項、如下：

let router= new Router({
	mode: 'history',
  routes: [
    {
      path: '/',
     
      component: IndexPage
    }]
})

mode有'hash'和'history'兩種，和後端配置有關，預設為hash。routes是一個由path（路徑）,component(要載入的元件)為鍵的物件所組成的陣列。（注意是routes）

第三步、router的使用。

在需要使用路由的元件中，加入router,如下：

new Vue({
  el: '#app',
  router,//es2015的寫法，等同於router:router
  template: '<Layout/>',
  components: { Layout }
})

在使用該路由的元件中，使用<router-view></router-view>這個內建元件來裝載需要載入的元件，實際效果是該內建元件會被替換成為路由所匹配的元件，如上的<Indexpage></Indexpage>。

同樣，如果需要使用類似於href的連結來進行頁面間的跳轉（實際為載入不同的元件），可以使用<router-link></router-link>內建元件，該元件需要繫結屬性，v-bind:to={path:'xxxx'}(簡寫為:to={path:'xxxxxx'})。

第四步：路由子節點

在實際使用時，路由是多層的，例如訪問/detail路徑時，載入到一個詳情介面，而/detail/apple需要跳轉到蘋果的詳情，/detail/orange需要跳轉到橘子的詳情。

vue-router的解決方式是建立路由的子節點，如下：

routes: [
    {
      path: '/detail', 
      component: DetailPage,
      children: [
       	{
	      path: 'apple',
	     
	      component: ApplePage
   		},
   		{
	      path: 'orange',
	     
	      component: OrangePage
   		}
      ]
    }
  ]

同樣，在DetailPage這個元件中需要使用<router-view></router-view>這個元件來載入不同的元件。（注意：子節點中的path應該為相對路徑，不需要加/）。

第五：路由重定向

比如在設計使用者登入模組時，如果使用者未登陸的狀態下訪問，需要將使用者的訪問頁面重定向到登陸介面。如下設定路由：

routes: [
 
    {
      path: '/detail', 
      redirect: '/login' ,
     
    }
  ]

在訪問/detail時，會重定向跳轉到/login。

如有不正確的，希望各路大神指正