Skip to content

Commit

Permalink
docs: Note that router === this.$router (#1687)
Browse files Browse the repository at this point in the history
* docs($router): Note that router === this.$router

* docs($router): Chris review

* docs($router): Phan review
  • Loading branch information
posva authored and yyx990803 committed Oct 11, 2017
1 parent c166822 commit a06e0b2
Showing 1 changed file with 24 additions and 1 deletion.
25 changes: 24 additions & 1 deletion docs/en/essentials/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,29 @@ const app = new Vue({
// Now the app has started!
```

You can also check out this example [live](https://jsfiddle.net/yyx990803/xgrjzsup/).
By injecting the router, we get access to it as `this.$router` as well as the current route as `this.$route` inside of any component:

```js
// Home.vue
export default {
computed: {
username () {
// We will see what `params` is shortly
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
```

Throughout the docs, we will often use the `router` instance. Keep in mind that `this.$router` is exactly the same as using `router`. The reason we use `this.$router` is because we don't want to import the router in every single component that needs to manipulate routing.

You can also check out this example [live](http://jsfiddle.net/yyx990803/xgrjzsup/).

Notice that a `<router-link>` automatically gets the `.router-link-active` class when its target route is matched. You can learn more about it in its [API reference](../api/router-link.md).

0 comments on commit a06e0b2

Please sign in to comment.