How Can Vue Router Get Current Route Path Of Lazy-loaded Modules On Page Load?

I have a vue app with router set up like: import index from './components/index.vue'; import http404 from './components/http404.vue'; // module lazy-loading const panda= () =>

Solution 1:

There is a currentRoute property that worked for me: this.$router.currentRoute

Solution 2:

May be you need to use $route not $router

check here : https://jsfiddle.net/nikleshraut/chyLjpv0/19/

You can also do it by $router this way

https://jsfiddle.net/nikleshraut/chyLjpv0/20/

Solution 3:

Use this.$route.path. Simple and effective.

Solution 4:

Hide Header in some components using the current route path.

get current route path using this.$route.path

<navigationv-if="showNavigation"></navigation>

data() {
    this.$route.path === '/' ? this.showNavigation = false : this.showNavigation = true
}

Solution 5:

If You have similar problem the correct answer is to use router.onReady and then calling your logic concerning path. Below the official Vue router docs:

router.onReady

Signature:

router.onReady(callback, [errorCallback])

This method queues a callback to be called when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route.

This is useful in server-side rendering to ensure consistent output on both the server and the client.

The second argument errorCallback is only supported in 2.4+. It will be called when the initial route resolution runs into an error (e.g. failed to resolve an async component).

Source: https://router.vuejs.org/api/#router-onready