Vue：在子组件中获取路由器实例答案

【问题标题】：Vue: Getting the router instance in children componentsVue：在子组件中获取路由器实例
【发布时间】：2017-05-29 15:53:31
【问题描述】：

我正在使用 Vue.js 和 vue-router，我正在尝试在点击事件上导航。

根据vue-router documentation我应该使用router.push(name) API函数。

问题是路由器在 App 根组件中初始化，我想从 App 子组件之一导航。

有没有办法从this.$root 或类似的东西中获取路由器的实例？

【问题讨论】：

你必须在路由中定义那个子组件，为其分配路径和名称，然后你就可以做到router.push('child-component')。我不确定我是否完全理解你的问题，所以更好的解释会有很大帮助。

【解决方案1】：

如vue-router documentation 中所述，每个组件都被注入$router 和$route 对象，从而可以通过组件内部的this.$router 和this.$route 访问它们。

如果你想从你的组件 javascript 代码中导航，你只需要这样做：

this.$router.push({path: 'thepath'});

如果你想从你的模板中导航，你可以使用：

<router-link :to="{path: 'thepath'}">The link</router-link>

【讨论】：

【解决方案2】：

是的，有一个非常简单的方法——如果您按照official guide 中的说明进行配置，则将automatically injected 放入所有子组件中作为this.$router。

【讨论】：

【解决方案3】：

如果您使用的是 Vue.js 2（编辑自 @jeerbl 答案），请尝试此操作

<router-link :to="{path: 'thepath'}">The link</router-link>

【讨论】：