Redirect the page through the router guard, the second time will not take effect

[XingXiaoWu]

Version

4.0.6

Reproduction link

https://github.com/XingXiaoWu/ele-error

Steps to reproduce

Note:

I have 2 path, /about and /login, and if url don't inclued login, I will redirect to /login

code

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: Home,
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to)=>{
  debugger
  if (to.path.includes('/login')) {
    return true;
  }else{
    return {
      path:'/login'
    }
  }
})

export default router

Step:

1. Type http://localhost:8081/#/about in your browser's address bar

it will redirect to http://localhost:8081/#/login

2. Type http://localhost:8081/#/about again

What is expected?

the page is login,
and the browser's address bar is http://localhost:8081/#/login

What is actually happening?

the page is login
But the browser's address bar is http://localhost:8081/#/about

---

Pages also change on some micro front-end frameworks, like qiankun

[XingXiaoWu]

QQ20210429-170034-HD.mp4

I could provide a recording screen, and I obviously triggered the jump to the /login page, but in the end my URL was still frozen at /about

My browser version:

Microsoft Edge 90.0.818.49 (64 位)

I'm sorry I can't provide an online demo like codesandbox because it can't be replicated on these online sites

[posva]

This one is a bit special because it happens only in hash mode through an interaction that is problematic by design: changing the URL manually doesn't trigger a reload.

It has a few edge cases, I hope they can all be fixed. For example the same problem appear when cancelling the navigation with a return false

[XingXiaoWu]

This one is a bit special because it happens only in hash mode through an interaction that is problematic by design: changing the URL manually doesn't trigger a reload.

It has a few edge cases, I hope they can all be fixed

Yes, and in some edge cases, the page changes. If necessary, I can also provide a demo, but it may be more complicated

[posva]

The repro is good. I started working on a fix

[XingXiaoWu]

The repro is good. I started working on a fix

thx

[PeterAlfredLee]

@XingXiaoWu

This might be a workaround, add param force: true, and your router guard looks like this :

router.beforeEach((to)=>{
  if (to.path.includes('/login')) {
    return true;
  }else{
    return {
      path:'/login',
      force: true
    }
  }
})

I just tested it, it work.

[XingXiaoWu]

@XingXiaoWu

This might be a workaround, add param , and your router guard looks like this :force: true

router.beforeEach((to)=>{
  if (to.path.includes('/login')) {
    return true;
  }else{
    return {
      path:'/login',
      force: true
    }
  }
})

I just tested it, it work.

Thx!!!!
That's a great temporary solution!!! (I mean if @posva didn't say it would be repaired, it's a great solution.)