Vue之路：轻松掌握路径转换的实用技巧与案例分析

一、图片路径转二进制文件流（binary）

1.1 图片路径转换为Base64

function imageUrlToBase64(imageUrl) {
  let image = new Image();
  image.setAttribute('crossOrigin', 'anonymous');
  image.src = imageUrl + "&v=" + Math.random();

  image.onload = () => {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    var quality = 0.8;
    var dataURL = canvas.toDataURL("image/jpeg", quality);
    this.base64toFile(dataURL);
  };
}

1.2 Base64转换为二进制文件流（binary）

接下来，我们需要将Base64字符串转换为二进制文件流。以下是一个实现方法：

function base64toFile(dataurl) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  var blob = new Blob([u8arr], { type: mime });
  var url = URL.createObjectURL(blob);

  // 在这里可以进行文件的下载或上传等操作
}

二、通过URL中的hash（#号）实现不同页面之间的切换

在Vue单页面应用（SPA）中，我们通常使用vue-router来实现页面跳转。然而，有时候我们可能需要通过URL中的hash（#号）来实现不同页面之间的切换。

2.1 路由配置

在vue-router中，我们可以通过配置router-link组件的tag属性来实现新窗口打开页面。以下是一个示例：

<router-link tag="a" target="_blank" :to="{ name: 'detail', query: { goodsId: '1111' }}">热门好货</router-link>

2.2 路由跳转

如果需要通过路由实现跳转，可以使用以下方法：

let routeData = this.$router.resolve({
  name: "detail",
  query: { goodsId: '1111' }
});
window.open(routeData.href, 'blank');

在实际应用中，我们可能会遇到跳转到根路径的问题。这可能是由于路由配置或路由解析导致的。在这种情况下，我们需要检查路由配置和解析逻辑，确保路径正确。

三、总结