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