19/3/31學習筆記

UnixAgain 發布于2019-08-26 13:39 / 1179人閱讀

摘要：在失活的組件里調用離開守衛。調用全局的守衛。用創建好的實例調用守衛中傳給的回調函數。路由元信息定義路由的時候可以配置字段

vue-router
1 router-link 導航到不同組件
Go to Foo
Go to Bar
定義路由
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
]
當對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active

2 動態路由匹配
routes: [

// 動態路徑參數 以冒號開頭
{ path: "/user/:id", component: User }

]
3 嵌套路由，在組件中還包含多個子組件且存在路由跳轉
routes: [

{ path: "/user/:id", component: User,
  children: [
    {
      // 當 /user/:id/profile 匹配成功，
      // UserProfile 會被渲染在 User 的  中
      path: "profile",
      component: UserProfile
    },
    {
      // 當 /user/:id/posts 匹配成功
      // UserPosts 會被渲染在 User 的  中
      path: "posts",
      component: UserPosts
    }
  ]
}

]

4 編程式導航
除了可以通過跳轉，還可以通過 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 }
    }
  ]
}

]
})

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109237.html

ApacheCN 人工智能知識樹 v1.0

摘要：貢獻者飛龍版本最近總是有人問我，把這些資料看完一遍要用多長時間，如果你一本書一本書看的話，的確要用很長時間。為了方便大家，我就把每本書的章節拆開，再按照知識點合并，手動整理了這個知識樹。 Special Sponsors showImg(https://segmentfault.com/img/remote/1460000018907426?w=1760&h=200); 貢獻者：飛龍版...

劉厚水 2019-06-26 19:00 評論0 收藏0
【LNMPR源碼學習】筆記匯總

摘要：此文用于匯總跟隨陳雷老師及團隊的視頻，學習源碼過程中的思考整理與心得體會，此文會不斷更新視頻傳送門每日學習記錄使用錄像設備記錄每天的學習源碼學習源碼學習內存管理筆記源碼學習內存管理筆記源碼學習內存管理筆記源碼學習基本變量筆記此文用于匯總跟隨陳雷老師及團隊的視頻，學習源碼過程中的思考、整理與心得體會，此文會不斷更新視頻傳送門：【每日學習記錄】使用錄像設備記錄每天的學習 PHP7...

Barrior 2019-07-25 14:52 評論0 收藏0
React 入門學習筆記整理目錄

摘要：入門學習筆記整理一搭建環境入門學習筆記整理二簡介與語法入門學習筆記整理三組件入門學習筆記整理四事件入門學習筆記整理五入門學習筆記整理六組件通信入門學習筆記整理七生命周期入門學習筆記整理八入門學習筆記整理九路由React 入門學習筆記整理（一）——搭建環境 React 入門學習筆記整理（二）—— JSX簡介與語法 React 入門學習筆記整理（三）—— 組件 React 入門學習筆記整理（...

daryl 2019-04-23 11:57 評論0 收藏0