[Vuejs]-Vue 3 – Can't get the params value on route change

get params in vue 3 with composition API

Step 1

import { useRoute} from "vue-router";

Step 2

const route = useRoute();

step 3

route.params.token

To get params in vue v3 with vue-router v4.x, in created lifecycle hook.

In your main.js file,
instead of using

app.mount('#app')

change to this

 router.isReady().then(() => {
  app.mount('#app')
})

It’s work for me, Hope this could help.

Example code of main.js

import {createApp } from 'vue'
import App from './App.vue'

import { createRouter,  createWebHashHistory} from 'vue-router'

const routes = [
  {
    path: '/dashboard/:token',
    name: 'select-project',
    component: () =>
        import ('@/views/apps/projects/project-select/SelectProject.vue'),
}
]

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

const app =  createApp(App)

app.use(router)
app.use(RouterLink)

// app.mount('#app')

router.isReady().then(() => {
  app.mount('#app')
})