Vue: Getting the router instance in children components

Question

I'm using Vue.js and vue-router, I'm trying to navigate on a click event.

According to vue-router documentation I should use the router.push(name) API function.

The thing is that the router is initialized in the App root component and I want to navigate from one of the App component children.

Is there a way to grab the router insatnce from this.$root or something similar?

Answer 1

As stated in the vue-router documentation , every component is being injected with $router and $route objects, making them accessible via this.$router and this.$route inside the component.

If you want to navigate from your component javascript code, you just need to do:

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

If you want to navigate from your template, you can use:

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

There are examples of usage on the vue-router repository .

Answer 2

是的，有一种非常简单的方法 - 它会自动注入到所有子组件中this.$router如果您按照官方指南中的说明进行配置。

Answer 3

如果您使用Vue.js 2（从@jeerbl回答编辑），请尝试此操作

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