vue-router學習總結

vue-router學習

vue-router介紹

• vue-router借鑑了react-router和ui-router中全部的優勢
• 官方文檔：https://router.vuejs.org/

路由的快速開始

• 定義各頁面容器組件

• 定義路由配置文件

• 在入口文件添加路由配置信息

• 修改跟組件頁面信息

• 接下來能夠啓動項目查看路由跳轉

路由基礎知識介紹

動態路由

• 你能夠經過：給一個路由添加參數
• 以後在組件中經過this.$route.params.參數名獲取+ this.$route的api文檔https://router.vuejs.org/zh-cn/api/route-object.html
• 當路由參數發生變化的時候，組件不會被卸載而是複用，這也意味着組件的生命週期鉤子不會再被調用，那麼你只能監聽$routes實例屬性知道路由發生了變化

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
}

嵌套路由

• 若是有嵌套路由，要用children屬性去配置，路由路徑會自動拼接
• 能夠給一個頁面初始化一個組件用空路由實現

用代碼進行路由跳轉

• 在組件中你能夠經過this.$route獲取路由對象

-  字符串
router.push('home')

- 對象
router.push({ path: 'home' })

- 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

- 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

命名路由

• 有時候，經過一個名稱來標識一個路由顯得更方便一些，特別是在連接一個路由，或者是執行一些跳轉的時候。你能夠在建立Router實例的時候，在routes配置中給某個路由設置名稱。

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

• 要連接到一個命名路由，能夠給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

• 這跟代碼調用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})

命名視圖

• 在跳轉一個路由的時候能夠同時渲染頁面中的多個坑
• 若是 router-view 沒有設置名字，那麼默認爲 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

• 一個視圖使用一個組件渲染，所以對於同個路由，多個視圖就須要多個組件。確保正確使用 components 配置（帶上 s）：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

重定向和別名

• 重定向也是經過 routes 配置來完成，重定向的目標也能夠是一個命名的路由，甚至是一個方法:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/c', redirect: { name: 'foo' }},
    { path: '/d', redirect: to => {
      // 方法接收 目標路由 做爲參數
      // return 重定向的 字符串路徑/路徑對象
    }}
  ]
})

• 當路由路徑太深的時候，你能夠給路由起一個別名，那麼經過別名和訪問太深的路由的頁面渲染效果是同樣的
• 『重定向』的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，而後匹配路由爲 /b，那麼『別名』又是什麼呢？
• /a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持爲 /b，可是路由匹配則爲 /a，就像用戶訪問 /a 同樣。
• 上面對應的路由配置爲：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

三種history

• mode

• 類型: string
• 默認值: "hash" (瀏覽器環境) | "abstract" (Node.ls 環境)
• 可選值: "hash" | "history" | "abstract"

• 配置路由模式:

• hash: 使用URL hash值來作路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
• history: 依賴 HTML5 History API 和服務器配置。查看官方HTML5 History模式
• abstract: 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的API，路由會自動強制進入這個模式。

導航鉤子

• 能夠在鉤子裏作權限校驗和日誌記錄
• 一共有三種導航鉤子，在鉤子中別忘了必定要調用next方法
• 官方網址