Vue路由name为undefined且路径不正确问题咨询

问题原因 #

根组件App.vue的mounted（Vue2）或onMounted（Vue3）钩子执行时，Vue Router可能还未完成初始导航的解析工作，此时直接访问route.name、route.path会得到未定义或错误的值。

解决方法 #

方法1：等待路由初始化完成（推荐）

利用Vue Router提供的isReady()（Vue3）或onReady()（Vue2）方法，等待路由准备就绪后再执行依赖路由的逻辑：

Vue3 示例

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

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

onMounted(async () => {
  await router.isReady()
  // 此时可正常获取路由信息
  console.log(route.name)
  console.log(route.path)
  // 编写你的业务逻辑
})
</script>

Vue2 示例

<script>
export default {
  mounted() {
    this.$router.onReady(() => {
      console.log(this.$route.name)
      console.log(this.$route.path)
      // 编写你的业务逻辑
    })
  }
}
</script>

方法2：监听路由变化（含初始触发）

通过监听路由对象的变化，确保在路由更新（包括初始加载）时执行逻辑：

Vue3 示例

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

const route = useRoute()

// immediate: true 会在组件挂载时立即执行一次
watch(route, (newRoute) => {
  console.log(newRoute.name)
  console.log(newRoute.path)
  // 编写你的业务逻辑
}, { immediate: true })
</script>

Vue2 示例

<script>
export default {
  watch: {
    '$route': {
      handler(newRoute) {
        console.log(newRoute.name)
        console.log(newRoute.path)
        // 编写你的业务逻辑
      },
      immediate: true
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Nathan Wailes