Router enters home "/" first

[qxygene]

Version

3.5.1

Reproduction link

https://jsfiddle.net/chrisvfritz/50wL7mdz/

Steps to reproduce

Router enters home "/" first then another route at history mode on browser refresh or direct enter.

When hit http://localhost:8080/page, it goes to http://localhost:8080/ and after http://localhost:8080/page

How to prevent this?

const routes = [
{
path: '/home',
name: 'Home',
component: () => import('../views/Home.vue'),
},
{
path: '/page',
name: 'page',
component: () => import('../views/Page.vue'),
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});

What is expected?

Router enters home "/" first then another route at history mode on browser refresh or direct enter.

When hit http://localhost:8080/page, it goes to http://localhost:8080/ and after http://localhost:8080/page

How to prevent this?

const routes = [
{
path: '/home',
name: 'Home',
component: () => import('../views/Home.vue'),
},
{
path: '/page',
name: 'page',
component: () => import('../views/Page.vue'),
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});

What is actually happening?

Router enters home "/" first then another route at history mode on browser refresh or direct enter.

When hit http://localhost:8080/page, it goes to http://localhost:8080/ and after http://localhost:8080/page

How to prevent this?

const routes = [
{
path: '/home',
name: 'Home',
component: () => import('../views/Home.vue'),
},
{
path: '/page',
name: 'page',
component: () => import('../views/Page.vue'),
}
]

const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

[ssw1992]

I have same problem，one project reproduce， one project is no problem。
watch $route.path and refresh page, you can see it from / to page path

[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.