docs($router): Note that router === this.$router #1687
Conversation
|
@chrisvfritz Can I have your review on this, please? |
|
The computed code block might not even be necessary though that is another great insight for getting params! Super helpful knowing we can refer to this.$router (a lot of the answers on the internets do things with this.$route as a legacy from vue 1.0) |
|
@connor11528 That's a bit terrifying... It's a very basic feature. This means it's probably not clear in the docs 😞 |
| // Redirecting to another route | ||
| this.$router.push('/redirect') | ||
| } | ||
| } |
There was a problem hiding this comment.
Looks like we're missing a } here.
| } | ||
| ``` | ||
|
|
||
| Thoroughly 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. |
There was a problem hiding this comment.
Thoroughly -> Throughout
There was a problem hiding this comment.
Hmm, I'm actually wondering now if this paragraph is even necessary. I feel like the idea that router === this.$router is made clear by:
By injecting the router, we get access to it as
this.$router
There was a problem hiding this comment.
I wonder as well, let's share with the team
There was a problem hiding this comment.
It's the kind of text I'd put inside of a warning p
| params () { | ||
| // We will see what params are shortly | ||
| return this.$route.params | ||
| } |
There was a problem hiding this comment.
It might be nice to update this to a more real-world example. For example:
username () {
// We will see what params are shortly
return this.$route.params.username
}| someMethod () { | ||
| // Redirecting to another route | ||
| this.$router.push('/redirect') | ||
| } |
There was a problem hiding this comment.
Again, a more real-world example could be helpful, so that readers can begin imagining when they might use this.$router. For example:
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}There was a problem hiding this comment.
Another note: I'd probably avoid the word "redirect" here, as I think it implies an immediate transfer to another route in most cases - "navigate" or simple "go" are probably more appropriate.
|
Thanks a lot for the nice review @chrisvfritz 🙂 |
| export default { | ||
| computed: { | ||
| username () { | ||
| // We will see what params are shortly |
There was a problem hiding this comment.
It should be
// We will see what `params` is shortly
since params here refers to the attribute's name.
| ``` | ||
|
|
||
| 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 checkout this example [live](http://jsfiddle.net/yyx990803/xgrjzsup/). |
There was a problem hiding this comment.
It should be check out (with a space), as "checkout" is a noun.
There was a problem hiding this comment.
Ah, thanks, I'll fix other _checkout_s as well but in another commit
|
|
||
| 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). |
There was a problem hiding this comment.
Is it router-link.md or router-link.html?
There was a problem hiding this comment.
gitbook transforms it automatically
No description provided.