项目中使用firame引入html 解决路由错乱问题

问题描述:

在项目中使用firame引入html,引入的html中有路由跳转,当点击html页面中的路由跳转时,浏览器history会记录次路由,当在引入iframe返回上一级的页面中使用 router.go(-1)就会返回iframe中距离的路由,这样不符合逻辑解决方案如下:

主要是由于浏览器history记录了iframe嵌入页面的路由信息,这个信息不论是iframe内的地址跳转,还是iframe src的切换,都会被记录,下面给出解决方案

解决方案 如涉及iframe内地址的跳转

首先进入页面,记录history length

    let historyLength = 1;
    onMounted(() => {
      // iframe.value.contentWindow.location.replace(htmlUrl.value);
      historyLength = window.history.length;
    });```

## 然后在页面返回时获取当前history length,相减即可得知需要返回多少个页面

```typescript
    const clickBack = () => {
      // router.go(-1);
      let nowhl = window.history.length;
      let backCount = nowhl - historyLength + 1;
      router.go(-backCount);
    }

你可能感兴趣的:(前端技巧方法,Vue,JavaScript,html,服务器,前端)