Vue-router: In abstract mode, router doesn't load root path '/' on initial load.

[Samuell1]

Example:
https://jsfiddle.net/4c079nyf/10/

[fnlctrl]

Hi, thanks for filling this issue.
May I ask why are you using base in abstract mode? Since in abstract mode, urls don't matter, using base shouldn't give any noticeable change

[Samuell1]

Hi, if i don't set base, my router don't open first page '/'

[fnlctrl]

In abstract mode, setting base won't redirect to '/' either, as shown in your original fiddle.

So I think this is about abstract mode not directing to '/' on initial load.
As a fallback mode, abstract mode is supposed preserve the behavior of history/hash mode of directing to '/' on load, so I'm marking this as a bug.

@Samuell1 For now, as a work around, you can manually call router.replace('/'), see example below.
https://jsfiddle.net/qpnaokhf/

[yyx990803]

This is intended - in the browser, the user may visit the non-root URL on initial load, so the root view may not get rendered at all. In abstract mode, when the application boots it will be in a "nowhere" state until you explicitly tell the router where it is. This gives you a chance to render a non-root URL as your initial view, instead of rendering the root view and then triggering a navigation + re-render.

[cwang18]

How to render a non-root URL as the initial view?

Take the code in https://jsfiddle.net/qpnaokhf/, if the original URL is "/bar", how to show component Bar accordingly?

Many thanks!

[Samuell1]

@cwang18 You can change / in replace function for what you need

[cwang18]

Thanks!

However, how to tell what's in the replace function? When URL is root, should use replace("/"), but when URL is root + "/bar", should use replace("/bar").

To my test, $route.path always returned "/", no matter initial URL is root or root + "/bar".

[Samuell1]

You should use push to change url to /bar

[cwang18]

Let me rephrase my question:

Take the code of https://jsfiddle.net/qpnaokhf/. It hard coded: router.replace('/'), so the initial view is always Foo. This is correct if hitting URL http://root/.

But if hitting URL http://root/bar, I would like to show Bar.

What's the way to dynamically push the correct route based on the URL?

Thanks!

[Samuell1]

@cwang18 that should work, if not then you missing htaccess or something i recommend to check vue router docs

[cwang18]

Thanks, I'll check those.

[fayt81]

I have the same problem of @cwang18. I have the router in abstract mode and I would like to always start from '/' unless when the URL has some specific paths (e.g., "/test"), which should lead to a specific component. I set the router to handle the component at that path, but the app always starts from '/' and $route.path is always '/', no matter what there is in the URL. @cwang18, have you manage to get it work? I think I have followed @Samuell1 instruction, but with no success.