vue项目线上发布后，打开新窗口路由会跳到首页(“/)

[992076178]

vue项目在本地运行各个页面路由跳转无问题，但是打包发布之后，在打开新窗口操作时就会偶尔跳转到"/"，不是100%出现但是非常影响使用

[992076178]

我看别人也会，但是没有解决办法，唯一的解决办法就是hash模式换成history。大佬们，帮忙看看，救救我

[Wei-Ba]

我猜不出来

[ZouJiu1]

this is my answer, it may be helpful https://stackoverflow.com/a/79302293/17601704

In vue router 4 for vue3

first

try to find the mounted APP.vue, when you refresh the webpage, the App.vue will be loaded firstly. So make sure you don't mounted this.$router.push("/")

  mounted() {
     this.$router.push("/");
}

the correct thing

mounted() {
    this.loading();
},
methods: {
  loading() {
    if(document.URL=="http://localhost:9000/" || document.URL=="https://zoujiu.com.cn/"
          || document.URL=="http://zoujiu.com.cn/" || document.URL=="http://localhost:9000/#/"
          || document.URL=="http://zoujiu.com.cn/#/"|| document.URL=="https://zoujiu.com.cn/#/"
        ) {
          this.$router.push({ path: '/'});
        }
  }
}

deployment

I use this history with nginx ssl https

const router = createRouter({
  // history: createMemoryHistory(),
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes:constantRoutes,
})

development

I use this history

const router = createRouter({
  // history: createMemoryHistory(),
  // history: createWebHashHistory(),
  history: createWebHistory(),
  routes:constantRoutes,
})

this is myown website http://zoujiu.com.cn.

[SituC]

打开新窗口分为ctrl+左键点击链接 以及 右键新窗口打开，第一种好处理，监听按键，第二种不好处理。所以最好的方法是直接替换链接的href地址。

  const generateHref = (item: ProjectListType) => {
    // 你的业务，比如不同状态跳转不同路由
    return router.resolve({ name, params: { id } }).href
  }

然后这样就可以了。