Vue路由生成链接、跳转新页面

vue-router 提供的 resolve 方法可以生成所需路由的链接。

vue-router 生成指定路由的链接

之前在项目中有需求要 在新窗口打开指定路由, 为此就需要获得 待跳转路由的链接, 看到有小伙伴手动拼接想要跳转的路由链接：

let publicPath = "/frontend";
let href = `http://xxx.xxx.xxx${publicPath}/login?param1=value1&param2=value2`;
ToUrl(href, "_blank");

其中 publicPath 包括后续的路由链接全靠手动拼接, 其实 vue-router 是提供了 resolve 方法可用的, 如下:

const route = this.$router.resolve({
  path: "/login", // 使用路由 path
  // name: "Login", // 或者使用路由 name
  query: {
    param1: "value1",
    param2: "value2",
  },
});

// 生成的链接: '/frontend/login?param1=value1&param2=value2'
// 其中 /frontend 为配置好的 publicPath
let href = route.href;
href = window.location.origin + href;

// 跳转到新页面
window.open(href, "_blank");
// window.open 可能被浏览器阻止, 可以使用自定义封装的方法来跳转
ToUrl(window.location.origin + href, "_blank");

通用跳转

来一个既可以跳转指定路由又可以跳转外部链接的方法：

/**
 * @param {*} params 路由配置对象 或者 外部链接Url
 * @param {Boolean} blank 是否在新窗口打开
 */
const ToPage = function (params = {}, blank = false) {
  if (typeof params === "object") {
    if (blank) {
      const href = this.$router.resolve(params).href;
      ToUrl(href, "_blank");
    } else {
      this.$router.push(params);
    }
  } else if (typeof params === "string") {
    ToUrl(params, blank ? "_blank" : "");
  } else {
    console.log("未实现");
  }
};

// 本站路由
ToPage({ name: "Login", query: { redirectUrl: "xxx" } });
// 本站路由-新页面打开
ToPage({ path: "/login", query: { redirectUrl: "xxx" } }, true);
// 跳转指定链接
ToPage("http://localhost:8088/frontend/demo?key=value");
// 跳转指定链接-新页面打开
ToPage("http://localhost:8088/frontend/demo?key=value", true);

[注] 创建 a 链接跳转

const ToUrl = function (href = "", target = "") {
  const a = document.createElement("a");
  a.setAttribute("href", href);
  target && a.setAttribute("target", target);
  a.click();
};

// 示例
ToUrl("https://www.qinwg.cn");
ToUrl("https://www.qinwg.cn", "_blank");