19/3/31學習筆記
vue-router
1 router-link 導航到不同元件
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
定義路由
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
當 <router-link> 對應的路由匹配成功，將自動設定 class 屬性值 .router-link-active
2 動態路由匹配
routes: [
// 動態路徑引數 以冒號開頭
{ path: '/user/:id', component: User }
]
3 巢狀路由 ，在元件中還包含多個子元件且存在路由跳轉
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
}
]
}
]
4 程式設計式導航
除了可以通過<router-link to: >跳轉，還可以通過 this.$router.push() 的方式跳轉（注意path的方式，params不能生效）
// 字串
router.push('home')
// 物件
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有引數的 path：
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
this.$router.replace()
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不會向 history 新增新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄。
5 重定向
重定向
重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目標也可以是一個命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
6 導航守衛
全域性前置守衛
你可以使用 router.beforeEach 註冊一個全域性前置守衛：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
完整的導航解析流程
導航被觸發。
在失活的元件裡呼叫離開守衛。
呼叫全域性的 beforeEach 守衛。
在重用的元件裡呼叫 beforeRouteUpdate 守衛 (2.2+)。
在路由配置裡呼叫 beforeEnter。
解析非同步路由元件。
在被啟用的元件裡呼叫 beforeRouteEnter。
呼叫全域性的 beforeResolve 守衛 (2.5+)。
導航被確認。
呼叫全域性的 afterEach 鉤子。
觸發 DOM 更新。
用建立好的例項呼叫 beforeRouteEnter 守衛中傳給 next 的回撥函式。
7 路由元資訊
定義路由的時候可以配置 meta 欄位：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})