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

  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.路由配置app

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.重定向和別名ide

重定向:
    { 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 的回調函數。
相關文章
相關標籤/搜索