Vue3的app.vue中created生命周期内this.$route.name为undefined如何解决

出现该问题的核心原因是：vue-router的初始路由匹配是异步流程，App组件的created钩子触发时机早于路由初始化完成的时机，此时this.$route还未挂载正确的匹配路由信息，因此拿到的name值为undefined。

你可以根据自己的代码写法选择以下任意一种解决方案：

• 方案1：监听$route变化，兼容路由后续切换也能拿到最新值
  选项式API写法：

export default {
  created() {
    // 添加immediate: true可以在监听器注册时立刻触发一次回调
    this.$watch('$route', (newVal) => {
      if (newVal.name) {
        // 这里写你拿到route.name后的业务逻辑
        console.log('当前路由name：', newVal.name)
      }
    }, { immediate: true })
  }
}

组合式API写法：

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

const route = useRoute()
watch(
  () => route.name,
  (newName) => {
    if (newName) {
      console.log('当前路由name：', newName)
    }
  },
  { immediate: true }
)

• 方案2：等待路由初始化完成后再取值，仅触发一次
  选项式API写法：

export default {
  created() {
    this.$router.onReady(() => {
      console.log('当前路由name：', this.$route.name)
    })
  }
}

组合式API写法：

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

const router = useRouter()
const route = useRoute()

// router.isReady()返回Promise，等待resolve后就能拿到正确的路由信息
await router.isReady()
console.log('当前路由name：', route.name)

内容的提问来源于stack exchange，提问作者Supuna Warusawithana