router.resolve() 的解釋和用法記錄

router.resolve() 的解釋

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)

解析目標位置 (格式和 <router-link> 的 to prop 一樣)。

• current 是當前默認的路由 (通常你不需要改變它)
• append 允許你在 current 路由上附加路徑 (如同 router-link)

上面的內容為官網中的說明，可以得知其作用是：返回一個完整的路徑信息。

location 參數為必填項；current 和 append 為可選參數，暫時沒有遇到過相關用法。

應用場景

我們可以利用 router.resolve 自定義一個頁面跳轉的方法，

Vue.prototype.$linkTo = function ({ path, query, type }) {
  if (typeof (arguments[0]) != 'object') {
    // 跳轉路徑
    path = arguments[0];
  }
  // 請求參數
  query = query || {};
  // 跳轉類型
  type = type || '_self';
  let routeData = router.resolve({
    path: path,
    query: query || {}
  })
  console.log('router.resolve()的返回值：', routeData)
  window.open(routeData.href, type);
}

// 調用
<button @click="$linkTo({ path: demoURL, query: { param1: xxx, param2: yyy } })"></button>

下面是 router.resolve() 的返回信息