vue-router總結

結合專案中的使用,學習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/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)