我的github iSAM2016

目錄

• 響應路由參數的變化
• 嵌套路由
• 函數式導航
• 路由的命名
  • 示例:切換路由的時候可以修改頁面的標題
• 導航鉤子
  • 全局鉤子
    • 實例：檢測用戶登錄
• 路由元信息
• 路由對象信息
• Router 實例
• $router.options

中途有一段時間去隔壁家的php玩了一遭，回頭看來，vuex、vue-router有了改變，一開始就對vue-route的細節不是很了解，今天總結一下。

官網的例子：

自己的一句話：

1. 定義路由組件（汽車）

   const Foo = { template: ‘

   foo ‘ }
   const Bar = { template: ‘ bar ‘

2. 定義路由（公路或導航）

   cost ruter = {
   { path: ‘/foo‘, component: Foo },
   { path: ‘/bar‘, component: Bar }
   }

3. 創建實例（紅路燈）

   cosnt app = new Vue({
   router}).$mount(‘#app‘)

動態的路由匹配

一個頁面是經常重復使用的，傳遞一個參數就可以了，比如傳遞一個ID號baidu.com?userId=123,這樣
就需要一個動態的路由來解決。

cost ruter = {
     { path: ‘/user：12‘, component: user }
}
 

當一個路由使用是後面有動態的參數，會映射到this.$router.param 中，這是函數體內調用路由的方法

響應路由參數的變化

因為沒有仔細看官網的實例，這點沒有看待，我遇到一次坑。這次教訓並不是粗心，是因為沒有仔細看文檔的好習慣，這個不好的習慣必須的改。就像數學老師說的回歸到基本理論

這也是一個常見的問題，我問需要監聽hash值的改變,來查詢參數如：

• book/search?cat=1
• book/search?cat=2

可是只有參數發生了改變，vue-router 認為組件式可以重用的，參數變化是不能引起從新向服務器獲取數據

const user = {
    wacth: {
        ‘$route‘ (to, from) {
        // 對路由變化作出響應...
        }
    }
}
 

嵌套路由

像這樣的的嵌套 /user/foo/profile

<div id="root">
     <router-view> </router-view>
</div>

<router-view>是最頂層的出口，渲染最高級路由匹配到的組件。同樣地，一個被渲染
組件同樣可以包含自己的嵌套

    const router = new VueRouter({
      routes: [
        { path: ‘/user/:id‘, component: User,
          children: [
            // UserHome will be rendered inside User‘s <router-view>
            // when /user/:id is matched
            { path: ‘‘, component: UserHome },
                    
            // UserProfile will be rendered inside User‘s <router-view>
            // when /user/:id/profile is matched
            { path: ‘profile‘, component: UserProfile },
    
            // UserPosts will be rendered inside User‘s <router-view>
            // when /user/:id/posts is matched
            { path: ‘posts‘, component: UserPosts }
          ]
        }
      ]
    })

函數式導航

註意 this.$route 和 this.router在使用上是有區別的

this.$router.push()

    調用的方法
    // 字符串
    this.$router.push(‘home‘)
    
    // 對象
    this.$router.push({ path: ‘home‘ })
    
    // 命名的路由
    this.$router.push({ name: ‘user‘, params: { userId: 123 }})
    
    // 帶查詢參數，變成 /register?plan=private
    this.$router.push({ path: ‘register‘, query: { plan: ‘private‘ }})

this.$router.go(n)

意思是在 history 記錄中向前或者後退多少步

路由的命名

可以為路由設置，別名方便使用。如設置name, isshow

    const router = new VueRouter({
      routes: [
        {
          path: ‘/user/:userId‘,
          name: ‘user‘,
          isShow: false
          component: User
        }
      ]
    })

路由的命名:示例

切換路由的時候可以修改頁面的標題

router.afterEach(transition => {
    document.title = transition.name
})

導航鉤子

導航鉤子

全局鉤子

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

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

主要用來攔截導航，讓他完成跳轉或取消。
參數：
to :Route: 標識即將進入的目標路由對象
from: Route 當前導航正要離開的路由
next: function 調用該方法來resolve 鉤子，它的參數：

• next(): 進行管道中的下一個鉤子
• next(false): 中斷當前的導航
• next(‘/‘) 或者 next({ path: ‘/‘ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。

實例：檢測用戶登錄

全局的鉤子主要用來是，判斷用戶是否登錄

router.beforeEach((to, from, next) => {
  //頁面滾動到頂部
  window.scroll(0, 0);
  //用戶沒有登錄了，並且還想訪問別的頁面，強制跳轉login頁
  if (!auth.login() && to.path !== ‘/login‘) {
      next(‘login‘);
    } else {
      //用戶已經登錄了，不在讓用戶訪問login頁
      if (auth.login() && to.path === ‘/login‘) {
          next({
            path: ‘/demo/user/list‘
          });
      } else {
        next();
      }
    }
})

某個路由獨享的鉤子（VIP組件）

 const router = new VueRouter({
  routes: [
    path: ‘/foo‘,
    component: Foo,
    beforeEach: (to, from, next) => {

    }  
  ]
})

路由元信息

較難理解

我們稱呼routers 配置中的每個路由對象為路由記錄。路由記錄可以是嵌套的。比如
http://localhost:3000/#/demo/user/list
這個地址中可以說明路由記錄有三個，分別是：

• /demo
• /demo/use
• /demo/use/list

一個路由匹配到的多有路由記錄暴露在$route對象當中的$route.matched 數組當中，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

示例

路由對象信息

對象出現的地方，註意是route 沒有r結尾

對象的屬性就不書寫了見路由信息對象的屬性

Router 實例

Router註意是 有r結尾
Router 實例屬性

$router.options

在$router 中有個鬼是$router.options 官網沒有找到，說明。
這個屬性包含了路由的樹形結構，可以借助這個來實現menu層級的劃分

vue路由復習（轉載）