[Bug report] navigate to anchor on another page does not work

[John60676]

Bug report

Description

Navigation to anchor on another page does not work. In dev mode, the browser will receive a warning message from vue-router.

  Couldn't find element using selector "#plugins" returned by scrollBehavior.

Steps to reproduce

• Reproduction link / repo: https://vuepress2.netlify.app/guide/plugin.html

Expected behavior

Navigation to anchor

Screenshots

Environment info

• Browser: Chrome 89.0.4389.90

[meteorlxy]

In fact I have noticed it before. Just didn't have time to figure out the reason. 😅

[meteorlxy]

Not sure if this is related to vue-router, cc @posva

[posva]

This is because of the transition. When using a transition, you need to return a promise in scrollBehavior at https://github.com/vuepress/vuepress-next/blob/187aef36607efc62d7b2d5c773553f89685cf64c/packages/%40vuepress/client/src/app.ts#L78

There is an example at https://github.com/vuejs/vue-router-next/tree/master/e2e/scroll-behavior by using @before-enter and @before-leave on the transition wrapping the view

[meteorlxy]

@posva Thanks for your tips.

Transitions may be added by themes, so the scrollBehavior should be modified on demand by theme. So https://github.com/vuejs/vue-router-next/pull/602 is really helpful lol 👍

[John60676]

Maybe I can submit a PR to fix this problem

[meteorlxy]

@posva

We found that the initial scrollBehavior will also fail, because it happens before the app mounted. Any ideas about that?

BTW, it only occurs in dev mode, as all the content has already been pre-rendered in prod mode.

[posva]

We found that the initial scrollBehavior will also fail, because it happens before the app mounted. Any ideas about that?

I checked on my e2e tests (scroll-behavior) and it seems to work correctly. Note you can check for the first navigation by checking if from == START_LOCATION

[meteorlxy]

The initial scrollBehavior issue is fixed via 2f5450f0b8dcc4aa49b1c19a1adea6e84a1594c4