vue-router

1. 動態路由匹配：

當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。

解決方法：

方法一： watch（監測變化） $route 對象；
const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
}

方法二：beforeRouteUpdate 守衛；
const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

2. 嵌套路由：（http://www.javashuo.com/article/p-wxweahnp-cp.html）　

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

要在嵌套的出口中渲染組件，須要在 VueRouter 的參數中使用 children 配置：
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 當 /user/:id/profile 匹配成功，
          // UserProfile 會被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 當 /user/:id/posts 匹配成功
          // UserPosts 會被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

3. 命名視圖（好比有菜單欄狀況）：

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>


<!-- 路由配置-->
{
  path: '/settings',
  // 你也能夠在頂級路由就配置命名視圖
  component: UserSettings,
  children: [{
    path: 'emails',      // 路由（/settings/emails）
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',      // 路由（/settings/profile）
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

4. 重命名和別名：

重命名：　　

1. 
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

2. 也能夠寫命名的路由：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})
3. 或者寫一個方法：
const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標路由 做爲參數
      // return 重定向的 字符串路徑/路徑對象
    }}
  ]
})　　

 別名：不一樣的路由名字，相同的頁面；

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

5. 向路由組件傳遞props：

經過props可達到解耦的效果，子組件經過 props：[] 來接收；

幾種方式：

（1）布爾模式：若是 props 被設置爲 true，route.params 將會被設置爲組件屬性。

（2）對象模式：若是 props 是一個對象，它會被按原樣設置爲組件屬性。當 props 是靜態的時候有用。（至關於普通父子組件 props 的傳遞）　　

（3）函數模式：建立一個函數返回 props。

布爾模式：
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 對於包含命名視圖的路由，你必須分別爲每一個命名視圖添加 `props` 選項：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

對象模式：
const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

函數模式：
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

6. H5 history 模式：

　vue-router 默認 hash 模式，若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面　

7. 導航守衛（https://router.vuejs.org/zh-cn/advanced/navigation-guards.html）：

導航解析流程：

1. 導航被觸發。
2. 在失活的組件裏調用離開守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置裏調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件裏調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鉤子。
11. 觸發 DOM 更新。
12. 用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

8. 滾動行爲（https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html）：  

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像從新加載頁面那樣。 

當建立一個 Router 實例， 有 scrollBehavior 方法。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滾動到哪一個的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (經過瀏覽器的 前進/後退 按鈕觸發) 時纔可用

    這個方法返回滾動位置的對象信息，長這樣：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

9. 404頁面：

 export default new Router({
      routes: [
        {
          path: '*', // 404 頁面 
          component: () => import('./notFind') // 或者使用component也能夠的
        },
      ]
    })

當進入一個沒有 聲明/沒有匹配 的路由頁面時就會跳轉到404頁面。

好比進入www.baidu.com/testRouter,就會自動跳轉到notFind頁面。

當你沒有聲明一個404頁面，進入www.baidu.com/testRouter，顯示的頁面是一片空白。