VueRouter

劉厚水發(fā)布于2019-08-23 18:08 / 1840人閱讀

摘要：當(dāng)對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置屬性值。執(zhí)行效果依賴(lài)方法的調(diào)用參數(shù)。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。滾動(dòng)行為只在支持的瀏覽器中可用。當(dāng)且僅當(dāng)導(dǎo)航通過(guò)瀏覽器的前進(jìn)后退按鈕觸發(fā)時(shí)才可用。

當(dāng)  對(duì)應(yīng)的路由匹配成功，將自動(dòng)設(shè)置 class 屬性值 .router-link-active 。

默認(rèn) hash 模式：使用 URL 的 hash 來(lái)模擬一個(gè)完整的 URL，于是當(dāng) URL 改變時(shí)，頁(yè)面不會(huì)重新加載。
history 模式：充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面，此模式如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè) index.html 頁(yè)面。

動(dòng)態(tài)路由匹配
{path: "/user/:id", component: User}
user/abc user/123 都將映射到相同的路由
this.$route.params.id（template 中 $route.params.id）

{path: "/user-*"} 匹配以 `/user-` 開(kāi)頭的任意路徑

嵌套路由
User 需要 
children 路徑不能以 "/" 開(kāi)頭
{
  path: "/user",
  component: User,
  children: [
    {
      // 當(dāng) /user/profile 匹配成功，
      // UserProfile 會(huì)被渲染在 User 的  中
      path: "profile",
      component: UserProfile
    },
    {
      // 當(dāng) /user/posts 匹配成功
      // UserPosts 會(huì)被渲染在 User 的  中
      path: "posts",
      component: UserPosts
    }
  ]
}

編程式的導(dǎo)航
 等同于調(diào)用 router.push(...)
this.$router.push(location, onComplete?, onAbort?)
this.$router.push("home")
this.$router.push({ path: "register", query: { plan: "private" }})
this.$router.push({ name: "user", params: { userId: "123" }})

location 如果提供了 path，params 會(huì)被忽略，解決辦法：{path: `register/${id}`}

onComplete 和 onAbort 兩個(gè)回調(diào)用于導(dǎo)航成功完成（在所有的異步鉤子被解析之后）或終止（導(dǎo)航到相同的路由、或在當(dāng)前導(dǎo)航完成之前導(dǎo)航到另一個(gè)不同的路由）的時(shí)候進(jìn)行相應(yīng)的調(diào)用

 等同于調(diào)用 router.replace(...)，和 router.push() 唯一的不同就是，它不會(huì)向 history 添加新記錄，而是替換掉當(dāng)前的 history 記錄

router.go(n) 這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類(lèi)似 window.history.go(n)。


命名視圖




{
  path: "/",
  components: {
    default: Foo,
    a: Bar,
    b: Baz
  }
}


重定向和別名
{ path: "/a", redirect: "/b" }
{ path: "/a", redirect: { name: "foo" }}
{ path: "/a", redirect: to => {
  // 方法接收 目標(biāo)路由 作為參數(shù)
  // return 重定向的 字符串路徑/路徑對(duì)象
}}

{ path: "/a", component: A, alias: "/b" }


導(dǎo)航守衛(wèi)
全局前置守衛(wèi)
router.beforeEach((to, from, next) => {
  // to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象
  // from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由
  // next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴(lài) next 方法的調(diào)用參數(shù)。
  // some code
  next()
})

全局后置鉤子
router.afterEach((to, from) => {
  // ...
})

路由獨(dú)享的守衛(wèi)
{
  path: "/foo",
  component: Foo,
  beforeEnter: (to, from, next) => {/* */}
}

組件內(nèi)的守衛(wèi)
const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用
    // 【不能】獲取組件實(shí)例 `this`，不過(guò)，你可以通過(guò)傳一個(gè)回調(diào)給 next來(lái)訪(fǎng)問(wèn)組件實(shí)例
    next(vm => {
      // 通過(guò) `vm` 訪(fǎng)問(wèn)組件實(shí)例
    })
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒(méi)被創(chuàng)建
  },
  beforeRouteUpdate (to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來(lái)說(shuō)，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪(fǎng)問(wèn)組件實(shí)例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導(dǎo)航離開(kāi)該組件的對(duì)應(yīng)路由時(shí)調(diào)用
    // 可以訪(fǎng)問(wèn)組件實(shí)例 `this`
  }
}

路由元信息
{
  path: "bar",
  component: Bar,
  meta: { requiresAuth: true, title: "BAR" }
}
遍歷 $route.matched 來(lái)檢查路由記錄中的 meta 字段。

滾動(dòng)行為
scrollBehavior 只在支持 history.pushState 的瀏覽器中可用。
new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // savedPosition 當(dāng)且僅當(dāng) popstate 導(dǎo)航 (通過(guò)瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。
    // return 期望滾動(dòng)到哪個(gè)的位置
  }
})


路由懶加載
const Foo = () => import("./Foo.vue")

https://router.vuejs.org/zh/