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