資訊專欄INFORMATION COLUMN
摘要：在失活的組件里調(diào)用離開守衛(wèi)。調(diào)用全局的守衛(wèi)。用創(chuàng)建好的實例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。路由元信息定義路由的時候可以配置字段
vue-router
1 router-link 導(dǎo)航到不同組件
定義路由
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
]
當(dāng)
2 動態(tài)路由匹配
routes: [
// 動態(tài)路徑參數(shù) 以冒號開頭
{ path: "/user/:id", component: User }
]
3 嵌套路由 ，在組件中還包含多個子組件且存在路由跳轉(zhuǎn)
routes: [
{ path: "/user/:id", component: User,
children: [
{
// 當(dāng) /user/:id/profile 匹配成功，
// UserProfile 會被渲染在 User 的 中
path: "profile",
component: UserProfile
},
{
// 當(dāng) /user/:id/posts 匹配成功
// UserPosts 會被渲染在 User 的 中
path: "posts",
component: UserPosts
}
]
}
]
4 編程式導(dǎo)航
除了可以通過
// 字符串
router.push("home")
// 對象
router.push({ path: "home" })
// 命名的路由
router.push({ name: "user", params: { userId: "123" }})
// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})
注意：如果提供了 path，params 會被忽略，上述例子中的 query 并不屬于這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有參數(shù)的 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 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。
5 重定向
重定向重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: "/a", redirect: "/b" }
]
})
重定向的目標(biāo)也可以是一個命名的路由：
const router = new VueRouter({
routes: [
{ path: "/a", redirect: { name: "foo" }}
]
})
6 導(dǎo)航守衛(wèi)
全局前置守衛(wèi)
你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
完整的導(dǎo)航解析流程
導(dǎo)航被觸發(fā)。
在失活的組件里調(diào)用離開守衛(wèi)。
調(diào)用全局的 beforeEach 守衛(wèi)。
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
在路由配置里調(diào)用 beforeEnter。
解析異步路由組件。
在被激活的組件里調(diào)用 beforeRouteEnter。
調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
導(dǎo)航被確認(rèn)。
調(diào)用全局的 afterEach 鉤子。
觸發(fā) DOM 更新。
用創(chuàng)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。
7 路由元信息
定義路由的時候可以配置 meta 字段：
const router = new VueRouter({
routes: [
{
path: "/foo",
component: Foo,
children: [
{
path: "bar",
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109237.html
摘要：貢獻(xiàn)者飛龍版本最近總是有人問我，把這些資料看完一遍要用多長時間，如果你一本書一本書看的話，的確要用很長時間。為了方便大家，我就把每本書的章節(jié)拆開，再按照知識點合并，手動整理了這個知識樹。 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1760&h=200); 貢獻(xiàn)者：飛龍版...
摘要：此文用于匯總跟隨陳雷老師及團(tuán)隊的視頻，學(xué)習(xí)源碼過程中的思考整理與心得體會，此文會不斷更新視頻傳送門每日學(xué)習(xí)記錄使用錄像設(shè)備記錄每天的學(xué)習(xí)源碼學(xué)習(xí)源碼學(xué)習(xí)內(nèi)存管理筆記源碼學(xué)習(xí)內(nèi)存管理筆記源碼學(xué)習(xí)內(nèi)存管理筆記源碼學(xué)習(xí)基本變量筆記 此文用于匯總跟隨陳雷老師及團(tuán)隊的視頻，學(xué)習(xí)源碼過程中的思考、整理與心得體會，此文會不斷更新 視頻傳送門：【每日學(xué)習(xí)記錄】使用錄像設(shè)備記錄每天的學(xué)習(xí) PHP7...
摘要：入門學(xué)習(xí)筆記整理一搭建環(huán)境入門學(xué)習(xí)筆記整理二簡介與語法入門學(xué)習(xí)筆記整理三組件入門學(xué)習(xí)筆記整理四事件入門學(xué)習(xí)筆記整理五入門學(xué)習(xí)筆記整理六組件通信入門學(xué)習(xí)筆記整理七生命周期入門學(xué)習(xí)筆記整理八入門學(xué)習(xí)筆記整理九路由React 入門學(xué)習(xí)筆記整理（一）——搭建環(huán)境 React 入門學(xué)習(xí)筆記整理（二）—— JSX簡介與語法 React 入門學(xué)習(xí)筆記整理（三）—— 組件 React 入門學(xué)習(xí)筆記整理（...
閱讀 483·2019-08-29 12:44
閱讀 3065·2019-08-26 17:49
閱讀 2545·2019-08-26 13:40
閱讀 1226·2019-08-26 13:39
閱讀 3709·2019-08-26 11:59
閱讀 1875·2019-08-26 10:59
閱讀 2544·2019-08-23 18:33
閱讀 2750·2019-08-23 18:30
