vue-router 在路由后无法识别来自组件的 $ref

Question

我是 Vuejs 和 vue-router 的新手，我阅读了很多文档和论坛来解决这个问题。

我可以让我的路由正常工作。但是我不能（轻松地）从路由的内容中获取“ref”。

我说“很容易”是因为我在“this.$children[0].$children[0].$refs” 上发现它对我来说不正确而且也很难维护。我想要的是像“this.$refs”或“this.router[“foo”].$refs”这样简单的方法。

我将在元素中粘贴带有“ref”的 vue 文档基本示例。

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></router-view>
  <p>
    refs founds: {{getAllRefs}}
  </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 // short for `routes: routes`
})

router.afterEach((to, from) => {
  console.log("going to " + to.fullPath)
  console.log(to);

  router.app.getAllRefs();
})

const app = new Vue({

router,
  computed: {
    getAllRefs: function(){
        return this.$refs
    }
  }
}).$mount('#app')

JsFiddle 示例 https://jsfiddle.net/3rdSenna/kaqqsrob/

Answer 1

最后我写了一个简单的 For 循环来挖掘每个 $refs 并找到子 $refs 名称直到匹配。它解决了我的问题。

但我相信@rinatdobr 的建议很适合我。

vue-router 在路由后无法识别来自组件的 $ref

vue-router doesn't recognize $ref from a component after routing

vue.js

vue-router

vue-component