Although Vue 3 has not been officially released yet, I, who loves new technologies, have long been unable to hold back my heart and started to try to use it in small projects.
According to this article "Vue3 beta was released in the early hours of this morning, the scaffolding project was publicly supported!" 》 I built a scaffolding project for Vue 3. The scaffolding project built in this way is not only the new version of vue, but also the latest version of vue-router and vuex.
Let me take a screenshot of package.json:
You can see that both vue-router and vuex have started the 4.0 era!
But in fact, I haven't learned about the new usage of vue-router 4.0, because I don't think it will have any major changes in the beta version like vue 3.0.
And vue-router 4.0 is still in the alpha stage, so I think it’s too early to learn it now. But it is it! It almost turned into a tragedy.
How to use the old version of vue + vue-router
If you define a dynamic parameter in the route, you usually write it like this:
{
path: '/:id'
}
Then when using programmatic navigation, it usually writes like this:
this.$router.push('/123')
This parameter is obtained in the component like this:
this.$route.params.id
I think the new version of vue + vue-router is used
Since there is no this in the Composition API of vue 3.0, I thought of obtaining $route by obtaining component instances:
import {
defineComponent, getCurrentInstance } from 'vue'
export default defineComponent((props, context) => {
const {
ctx } = getCurrentInstance()
console.log(ctx.$route)
})
Unexpectedly, what printed out is actually undefined!
What is the matter with this?
So I printed ctx again ( ctx is the current component context ):
Those fields without $ are the variables I defined in the component. Those with $ are built-in in Vue. After searching for a long time, I found that there is no $route. Only one $router is left. It is estimated that vue-router 4.0 will use the current route. The information is transferred to the $router.
With a guess, I clicked on $router:
currentRoute! If you look at the name, it should be it! So I:
import {
defineComponent, getCurrentInstance } from 'vue'
export default defineComponent((props, context) => {
const {
ctx } = getCurrentInstance()
console.log(ctx.$router.currentRoute.value.params.id)
})
Sure enough, I got it! So happy!
Actual new version of vue + vue-router usage
In the following process, I replaced the original this.$router with ctx.$router, and replaced the original this.$route with ctx.$router.currentRoute.value.
Although there were no bugs in the following progress, the program always runs as I imagined.
But after the project was packaged, an unexpected bug appeared: an error was reported that there was no push on undefined when the route was redirected.
It's weird, why doesn't the program get any errors during the development stage, it won't work after packaging? Relying on years of development experience, I quickly located the error of vue-router.
Is it wrong to write this? But I printed ctx, there is a $router in it, there is a currentRoute in $router, there is a value in currentRoute, there are params in the value, and in params, I can see the passed parameters when I am a bit enlightened. what:
It is estimated that it may be a bug of vue-router. Sure enough, the product of the alpha stage is not reliable. I am starting to regret using the new version of the vue scaffolding project.
Hooks in vue-router
But at this moment, my inspiration suddenly appeared. Wasn't vue 3 inspired by react hooks to produce the Composition API?
Then it is estimated that vue-router will definitely be inspired by react-router!
Fortunately, I have learned react, and I really don’t have enough skills! It is estimated that there must be a useXxx in it, like this:
import {
useXxx } from 'vue-router'
So what should be use? Logically speaking, it should try to keep in touch with the previous API, I guess it should be useRoute and useRouter!
In order to verify my idea, I opened node_modules and found the source code of vue-router:
Sure enough, in the 2454 and 2455 lines I found that it exported useRoute and useRouter, then it is it:
import {
defineComponent } from 'vue'
import {
useRoute, useRouter } from 'vue-router'
export default defineComponent(_ => {
const route = useRoute()
const router = useRouter()
console.log(route.params.id)
router.push('/xxx/xxx')
})
In this way, not only can the route be successfully redirected, but also the parameters passed by the route can be obtained. This time, I packaged and tried again, and it turned out that there was no previous error.
Conclusion
It is estimated that the future of vue family bucket will start the era of national hooks. While looking at the source code, I found that they have written some examples in the vue-router/playground folder, and I found some interesting usages in it.
If I have time, I will study it carefully and publish a more in-depth article for everyone. Of course, if there are already friends who can’t wait for me to publish a new article, you can directly enter the github address of vue-router-next:
Its examples are all placed in the playground folder, and I hope you will publish a more in-depth article after studying it!