How do I get current route in onMounted on page refresh?

Question

When reloading page, I want to get current route. Sadly route.name is undefined, router.currentRoute is RefImpl object, which has correct route with '/team' inside. router.currentRoute.value is just root '/', not '/team', as expected. Is it possible to get correct value from RefImpl?

import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'Canvas',
  components: { Ring2, Map },
  setup() {
    const router = useRouter()
    const route = useRoute()

    onMounted(() => {

      console.log(route.name) //undefined
      console.log(router.currentRoute) //RefImpl with correct value ('/team')
      console.log(router.currentRoute.value) // route is '/'
      const rawObject = {...router.currentRoute}
      console.log(rawObject) // value is '/'
      ...

Router is set up like this:

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

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

tony19 · Accepted Answer · 2023-09-19 20:25:14Z

25

This happens because the router hasn't yet completely resolved the initial navigation when you refresh the page, so route refers to the default (/) initially in onMounted.

Vue Router's isReady() returns a Promise that resolves when the router has completed the initial navigation, so your onMounted hook can await that Promise before trying to read route.path:

import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'

export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    onMounted(async () => {
      await router.isReady() 👈
      console.log('route.path', route.path)
    })
  },
}

demo

edited Sep 19, 2023 at 20:25

answered Jan 6, 2022 at 5:46

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soviut Over a year ago

Worth noting, this is also the earliest you can access the router meta. This is useful if you need to, say, hide the navbar until you know if the user is logged in or not.

Estus Flask · Accepted Answer · 2022-01-05 14:31:53Z

0

Try using the composable function useRoute :

import {
   useRoute
} from 'vue-router'
import {
   computed
} from 'vue'


setup() {
   const route = useRoute();

   const path = computed(() => route.path)
}

edited Jan 5, 2022 at 14:31

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

answered Jan 5, 2022 at 14:18

Kaddu Livingstone

1,7361 gold badge12 silver badges18 bronze badges

1 Comment

Andre Over a year ago

Sadly not getting result that i want, when i refresh or go to localhost:8080/team, computed value still gives me '/' as a path

Collectives™ on Stack Overflow

How do I get current route in onMounted on page refresh?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related