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