路由跳转后vue-router无法直接获取路由组件$ref问题求助

嗨，作为Vue和vue-router的新手，你遇到的这个问题其实挺常见的——直接嵌套访问$children确实既不规范又容易因为组件结构变动而失效，我来给你推荐两种更靠谱的方式：

方法一：给<router-view>添加Ref（最便捷） #

这是最简单直接的方案，你只需要给页面中的<router-view>标签加上一个ref，就能直接通过它访问当前渲染的路由组件实例，进而拿到组件内部的ref。

修改后的代码示例： #

HTML部分

<div id="app">
  <h1 ref="myrefInitial">Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 给router-view添加ref -->
  <router-view ref="currentRouteView"></router-view>
  <p>
    当前路由组件的refs: {{ currentRouteRefs }}
  </p>
</div>
<script src="index.js"></script>

JS部分

const Foo = { template: '<div ref="myrefFoo">foo</div>' }
const Bar = { template: '<div ref="myrefBar">bar</div>' }

const routes = [{
  path: '/foo',
  component: Foo
}, {
  path: '/bar',
  component: Bar
}]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  computed: {
    currentRouteRefs() {
      // 通过router-view的ref获取当前路由组件的refs
      return this.$refs.currentRouteView?.$refs || {}
    }
  },
  methods: {
    getAllRefs() {
      console.log('当前路由组件refs:', this.currentRouteRefs)
    }
  }
}).$mount('#app')

router.afterEach(() => {
  // 路由切换后调用方法打印refs
  app.getAllRefs()
})

这样一来，不管切换到/foo还是/bar，你都能通过this.$refs.currentRouteView.$refs直接拿到对应路由组件内部的ref，比如myrefFoo或者myrefBar，完全不用依赖$children的嵌套结构。

方法二：通过路由守卫缓存组件实例（进阶场景） #

如果你的场景需要在路由层面直接关联组件实例，也可以在路由的组件生命周期里把实例挂载到路由对象上：

const Foo = { 
  template: '<div ref="myrefFoo">foo</div>',
  mounted() {
    // 把当前组件实例挂载到对应的路由记录上
    this.$route.meta.componentInstance = this
  }
}

// 之后在需要的地方就能这样访问
router.afterEach((to) => {
  console.log(to.meta.componentInstance?.$refs.myrefFoo)
})

不过这种方式需要每个路由组件都手动处理挂载，相比第一种方法繁琐一些，更适合一些特殊的业务场景。

注意事项 #

• 要确保在组件挂载完成后再访问ref，所以用router.afterEach或者监听$route变化时，最好配合$nextTick使用，避免组件还没渲染完成导致ref为undefined。
• 使用可选链操作符?.可以避免组件未渲染时出现报错，让代码更健壮。

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