useRoute() return value will delay a moment

[TimRChen]

Version

4.0.0-beta.13

Reproduction link

https://codesandbox.io/s/awesome-framework-yifz2?file=/src/App.vue

Steps to reproduce

1. open console
2. watch print content

What is expected?

// 1. "Home"
// 2. "Home"

What is actually happening?

// 1. undefined
// 2. "Home"

---

I have 'RTMD', but still don't know why this happend.

[TimRChen]

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import { createRouter, createWebHashHistory } from "vue-router";

const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };

const routes = [
  { path: "/", name: "Home", component: Home },
  { path: "/about", name: "About", component: About }
];

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

createApp(App).use(router).mount("#app");

<!-- App.vue -- >
<template>
    <router-view />
</template>

<script>
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: "App",
  setup() {
    const route = useRoute()
    onMounted(() => {
      console.log(1, route.name) // just output undefined
      setTimeout(() => console.log(2, route.name), 1000) // 'Home'!
    })
  },
};
</script>

<style>
</style>

[TimRChen]

I've resolved this. ref: https://next.router.vuejs.org/api/#hasroute

// add this snippet in you main.js or main.ts
router.isReady().then(() => {
  app.mount('#app')
})

[fashen007]

还有其他解决方案吗

[ER-Tiylor]

router.isReady().then(() => doSomeThing() )
Ref: https://vue-land.github.io/faq/accessing-the-route