Vue：在子组件中获取路由器实例
Vue: Getting the router instance in children components
我正在使用 Vue.js 和 vue-router，我正在尝试通过点击事件进行导航。
根据 vue-router documentation 我应该使用 router.push(name) API 函数。
问题是路由器在 App 根组件中初始化，我想从 App 子组件之一导航。
有没有办法从 this.$root 或类似的东西中获取路由器实例？
如果您使用 Vue.js 2（根据@jeerbl 回答编辑）
，请试试这个
<router-link :to="{path: 'thepath'}">The link</router-link>
是的，有一个非常简单的方法——就是automatically injected into all child components as this.$router if you configured it per instructions in the official guide)。
如 vue-router documentation 所述，每个组件都被注入了 $router 和 $route 对象，使它们可以通过内部的 this.$router 和 this.$route 访问组件。
如果您想从您的组件 javascript 代码导航，您只需要做：
this.$router.push({path: 'thepath'});
如果您想从模板导航，可以使用：
<router-link :to="{path: 'thepath'}">The link</router-link>
vue-router repository上有使用示例。
我正在使用 Vue.js 和 vue-router，我正在尝试通过点击事件进行导航。
根据 vue-router documentation 我应该使用 router.push(name) API 函数。
问题是路由器在 App 根组件中初始化，我想从 App 子组件之一导航。
有没有办法从 this.$root 或类似的东西中获取路由器实例？
如果您使用 Vue.js 2（根据@jeerbl 回答编辑）
，请试试这个<router-link :to="{path: 'thepath'}">The link</router-link>
是的，有一个非常简单的方法——就是automatically injected into all child components as this.$router if you configured it per instructions in the official guide)。
如 vue-router documentation 所述，每个组件都被注入了 $router 和 $route 对象，使它们可以通过内部的 this.$router 和 this.$route 访问组件。
如果您想从您的组件 javascript 代码导航，您只需要做：
this.$router.push({path: 'thepath'});
如果您想从模板导航，可以使用：
<router-link :to="{path: 'thepath'}">The link</router-link>
vue-router repository上有使用示例。