vue-router總結

大灰狼的小綿羊哥哥發表於2017-03-19

結合專案中的使用,學習vue-router. https://1657413883.github.io/2017/03/18/vue-router總結/

http://www.tuicool.com/articles/J3ArAri

路由的用法

// router.config.js

const routerConfig = [

    {
        path: '/login',
        component: resolve => require(['登入路徑.vue'],resolve),
        meta: {noCheckSession: true}
    },
    {
        path: '/',
        component: resolve => require(['通用的主框架.vue'],resolve),
        children: [
            {
                path: '/team',
                name: 'team',
                component: resolve => require(['對應的路徑.vue'],resolve)                    
            }    ,
            {
                //其他類似
            }
        ]
    }

]


// main.js

import VueRouter from 'vue-router'
import ConfigRoute from './router.config'

Vue.use(VueRouter);

const router = {
    mode: 'history',
    base: __dirname ,
    routes: ConfigRoute,
    scrollBehavior(to,from,savedPosition){
        if(savedPosition){
            return savedPosition;
        }else{
            return {x: 0,y: 0}
        }
    }
}        

router.beforeEach((to, from, next) => {
  if(to.matched.some(record => !record.meta.noCheckSession)) {

    // 這個路由需要auth,檢驗是否登入了.

    let isLogin = auth.checkAuth()
    // console.log('need login', isLogin);
    if(!isLogin){

        // 沒有登入,重定向到登入頁面    

      console.error('Place login!')
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }else{
      next()
    }
  }else{
    next()
  }
})

const app = new Vue({     
  router      
}).$mount('#app')

知識點

router-link

  • 在HTML5 history模式下使用了base選項,所有to屬性可以不用寫基路徑
  • 會攔擊點選事件,不會重新載入頁面.
  • router-link預設渲染為a標籤,我們可以通過tag屬性設定為別的標籤(常用的li).
  • to屬性可以繫結name(命名元件),query(帶查詢引數)

    <router-link :to="{name:'entityList', query:{page: 'Ecp.SystemMessage.List.vdp'}}"
     class="msg" tag="li">
    
    </router-link>

router-view

  • router-view: 渲染匹配到的檢視元件,router-view匹配到的檢視元件裡面還可以巢狀自己的router-view.根據巢狀路徑(children)來繼續渲染.
  • router-view可以通過name屬性來渲染對應的component下相應的元件
  • router-view可以配合transition與keep-alive使用,如果同時使用,裡面要使用keep-alive.

    <transition  name="fade" mode="out-in"         key="$route.path">
    
       <router-view></router-view>
    
    </transition>

路由資訊物件

一個 route object(路由資訊物件) 表示當前啟用的路由的狀態資訊,包含了當前 URL 解析得到的資訊,還有 URL 匹配到的 route records(路由記錄)

route object 是 immutable(不可變) 的,每次成功的導航後都會產生一個新的物件。

  • 路由的滾動行為:當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新載入頁面那樣.(這個功能只在 HTML5 history 模式下可用)

    當建立一個 Router 例項,你可以提供一個 scrollBehavior 方法:
    
    scrollBehavior 方法接收 to 和 from 路由物件。第三個引數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時才可用。
    
    scrollBehavior這個方法返回滾動位置的物件資訊.如果返回一個布林假的值,或者是一個空物件,那麼不會發生滾動。
    
    如:
        return {x:0,y:0} // 表示對於所有路由導航,簡單地讓頁面滾動到頂部。
    
        return savedPosion; //表示在按下 後退/前進 按鈕時,就會像瀏覽器的原生表現那樣
    
        if (to.hash) {
            return {
              selector: to.hash
            }
          }
        // 模擬『滾動到錨點』的行為
  • 產生路由資訊物件的行為

    1. 元件內的this.$route,$route.watch回撥
    
    2. route.match(location)的返回值
    
    3. 導航鉤子的引數:
    
            router.beforeEach((to, from, next) => {
              // to 和 from 都是 路由資訊物件
            })
    4. scrollBehavior的引數
    
            const router = new VueRouter({
              scrollBehavior (to, from, savedPosition) {
                // to 和 from 都是 路由資訊物件
              }
            })
  • $route.path: 字串,對應當前路由的路徑,總是解析為絕對路徑,如 “/foo/bar”。

  • $route.params: 一個 key/value 物件,包含了 動態片段 和 全匹配片段,如果沒有路由引數,就是一個空物件。

  • route.query:key/valueURL/foo?user=1route.query:一個key/value物件,表示URL查詢引數。例如,對於路徑/foo?user=1,則有route.query.user == 1,如果沒有查詢引數,則是個空物件。

  • $route.hash: 當前路由的 hash 值 (帶 #) ,如果沒有 hash 值,則為空字串。

  • $route.fullPath: 完成解析後的 URL,包含查詢引數和 hash 的完整路徑

  • $route.matched:一個陣列,包含當前路由的所有巢狀路徑片段的 路由記錄 (包含children下路徑)。

  • $route.name: 當前路由的名稱

Router的構造配置: router配置.

  • mode: 預設值為’hash’,可選值: “hash” | “history” | “abstract”.

    1. hash: 使用 URL hash 值來作路由。支援所有瀏覽器,包括不支援 HTML5 History Api 的瀏覽器。
    
    2. history: 依賴 HTML5 History API 和伺服器配置
    
    3. abstract: 支援所有 JavaScript 執行環境,如 Node.js 伺服器端。如果發現沒有瀏覽器的 API,路由會自動強制進入這個模式。
  • base: 預設值為’/‘,表示應用的基路徑.如果整個單頁應用服務在 /app/ 下,然後 base 就應該設為 “/app/“

  • linkActiveClass: 預設值: “router-link-active”,

  • scrollBehavior方法

導航鉤子

導購鉤子:用來攔截導航,讓它完成跳轉或取消.有多種方式可以在路由導航發生時執行鉤子:全域性的, 單個路由獨享的, 或者元件級的。

// 全域性鉤子
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // to: Route: 即將要進入的目標 路由物件
  // from: Route: 當前導航正要離開的路由
  // next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數
     - next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了,則導航的狀態就是 confirmed (確認的)
     - next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了(可能是使用者手動或者瀏覽器後退按鈕),那麼 URL 地址會重置到 from 路由對應的地址。
     - next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。中斷當前導航,然後進行一個新的導航。             
})

// 單個路由獨享的:  在自己的路由裡面設定
{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    // ...
  }
}

// 元件內的鉤子
    - beforeRouteEnter
    - beforeRouteUpdate
    - beforeRouteLeave

router例項

  • router.app: 配置了 router 的 Vue 根例項。

  • router.mode: 路由使用的 模式。

  • route.currentRoute: 當前路由對應的 路由資訊物件.

  • route.beforeEach(guard)

  • route.push() 跳轉路由,會向 history 棧新增一個新的記錄

    等價於
    <router-link :to="...">
    
    router.push({ name: 'user', params: { userId: 123 }})
    
    router.push({ path: 'register', query: { plan: 'private' }})
  • route.replace(): 它不會向 history 新增新記錄,替換掉當前的 history 記錄。

等價於:
<router-link :to="..." replace>
  • route.go(n):在 history 記錄中向前或者後退多少(n)步.類似 window.history.go(n)

  • route.back()

  • route.forward()

非同步載入

把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件.

// AMD風格

component: resolve => require(['登入路徑.vue'],resolve)