$route对象初始化机制及created钩子访问为空的问题解析

1. 为什么created钩子中拿到的$route是初始的根路径对象？ #

你在created()钩子中拿到的$route是路由初始化未完成时的默认状态，核心原因是Vue组件生命周期和路由匹配的时序差异：

• created()是组件实例同步创建完成后立即触发的钩子，此时路由的URL匹配逻辑还在异步执行中（路由需要解析当前URL、遍历路由配置找到匹配规则，这个过程属于事件循环的宏/微任务阶段）。
• 初始时路由未完成匹配，会先返回一个默认的根路径/的$route对象，也就是你看到的matched为空、name为undefined的状态。

你访问的地址是localhost:8080/?server=BlackHole，路径部分为/，而你的路由配置里：

• /network-error显然不匹配/
• /:server是动态路径路由，要求路径带有具体参数值（比如/BlackHole），/本身不满足该规则
  所以路由初始化时找不到匹配规则，就停留在了默认的/状态。

2. 为什么setTimeout能解决问题？ #

setTimeout(() => {}, 1)把路由判断逻辑放到了下一个事件循环周期执行，此时路由的初始化和URL匹配流程已经完成：

• 路由已解析当前URL的query参数，更新了$route对象
• 这时能正确拿到this.$route.query.server的值，进而执行$router.push跳转。

3. $route对象的初始化流程 #

Vue Router中$route的初始化大致分为以下步骤：

• 路由配置解析：创建Router实例时，会把传入的路由配置转换成内部路由映射表，包含路径、组件、名称等信息。
• URL解析：Router初始化时读取当前浏览器URL（location.href），解析出path、query、hash等部分。
• 路由匹配：遍历路由映射表，根据当前URL的path找到最匹配的路由规则，生成包含matched（匹配路由层级）、params、name等属性的路由记录。
• 响应式更新：生成的路由记录会被包装成响应式的$route对象，挂载到Vue实例上。当路由变化时，该对象自动更新，触发相关组件更新。

整个匹配和初始化过程是异步的，所以在组件created这类同步钩子中，无法拿到最终匹配完成的$route。

附你提供的代码片段 #

路由配置（index.js）

// index.js
{
  path: '/network-error',
  name: 'NetworkError',
  component: NetworkError
},
{
  path: '/:server',
},

App.vue代码

// App.vue
created() {
     setTimeout(() => {
      // △ Request to unreachable server
      if (this.$route.query.server == 'BlackHole')  
        {this.$router.push({ name: 'NetworkError' })}}, 1)},

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