第二課時: 路由詳情和導航流程解析

1. router-link 和 router-view組件

      <div id="app">
          <h1>Hello App!</h1>
          <p>
              <!-- 使用 router-link 組件來導航. -->
              <!-- 通過傳入 `to` 屬性指定鏈接. -->
              <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
              <router-link to="/foo">Go to Foo</router-link>
              <router-link to="/bar">Go to Bar</router-link>
              <!-- 命名的路由+動態路由 -->
              <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
          </p>
              <!-- 路由出口 -->
              <!-- 路由匹配到的組件將渲染在這裏 -->
              <router-view></router-view>
      </div>

2.路由配置

a.動態路由
    // 動態路徑參數 以冒號開頭
    { path: '/user/:id', component: User }

b.嵌套路由

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
        }]
    }]
})

c.命名路由
    加了一個name屬性
   
   
d.命名視圖
    有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個佈局，有 sidebar (側導航) 和 main (主內容) 兩個視圖，這個時候命名視圖就派上用場了。
    <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>
    

3.JS操作路由

聲明式:  <router-link :to="...">     編程式: router.push(...)

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123// 這裏的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
  
聲明式: <router-link :to="..." replace>      編程式:  router.replace(...)

跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄

4.重定向和別名

重定向:
    { path: '/a', redirect: '/b' }
    { path: '/a', redirect: { name: 'foo' }}
    { path: '/a', redirect: to => {
    // 方法接收 目標路由 作爲參數
    // return 重定向的 字符串路徑/路徑對象
    }}


別名:
    “重定向”的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，然後匹配路由爲 /b，那麼“別名”又是什麼呢？
    /a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持爲 /b，但是路由匹配則爲 /a，就像用戶訪問 /a 一樣。
    { path: '/a', component: A, alias: '/b' }

完整的導航解析流程

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 的回調函數。