preface

Although Vue 3 hasn’t been officially released yet, as a new technology enthusiam, I’m already trying to use it in small projects.

According to this Vue3 beta release this morning, openly supporting the scaffolding project! I built a scaffolding project for Vue 3. In this way, not only Vue is the new version, but also Vue-Router and VUex are the latest.

Here’s a screenshot of package.json:

Vue-router and Vuex are both 4.0 enabled.

I haven’t read about the new use of Vue-Router 4.0, because I don’t think it will change as much as vue 3.0, which is already in beta.

Vue-router 4.0 is still in the alpha stage, so I think it’s too early to learn it. But this is it! It almost led to a tragedy.

This section describes how to use the old vUE + Vue-router

If you define a dynamic parameter in a route you would normally write:

{
    path: '/:id'
}
Copy the code

Then when you programmatically navigate, you usually write something like this:

this.$router.push('/ 123')
Copy the code

This parameter is obtained in the component:

this.$route.params.id
Copy the code

I think the new version of vUE + Vue-Router is used

Since the vue 3.0 Composition API does not have this, I thought of getting the $route by getting the component instance:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) = > {
    const { ctx } = getCurrentInstance()
    
    console.log(ctx.$route)
})
Copy the code

Did not expect to print out is undefined! What’s going on? So I print CTX again (CTX is the current component context) :

Does not have the field is $I own variables defined in the component, the vue is built-in with $, seek along while found no $route, left with a $router, estimate the vue – the router the current routing information is transferred to $4.0 in the router.

With that in mind, I clicked on $router:

currentRoute! From 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)
})
Copy the code

Sure enough, I got it! How happy!

Actual new version of vUE + Vue-Router usage

I use in the process of the CTX $router to replace the original enclosing $router, with CTX. $router. CurrentRoute. Value instead of the original enclosing $route.

Although there were no bugs along the way, the program worked exactly as I had expected.

However, after the project was packaged, an unexpected bug appeared: when jumping the route, an error was reported that there was no push on undefined.

Strange, in the development phase of the program did not have any error how can not package it? With years of development experience, I quickly identified the vue-Router fault.

Is that wrong? But I printed the CTX, $router = currentRoute; $router = currentRoute; value = params; params = params;

Maybe it was a vue-Router bug. Sure enough, the alpha product was unreliable, and I began to regret using the new version of Vue Scaffolding.

Vue – the hooks in the router

But then IT hit me: wasn’t VUE 3 inspired by the React Hooks that created the Composition API?

The Vue-router must have been inspired by the React-Router!

It’s a good thing I learned react. There must be a useXxx inside, like this:

import { useXxx } from 'vue-router'
Copy the code

Use what? I guess useRoute and useRouter.

To verify my idea, I opened node_modules and found the vue-router source code:

Sure enough, at lines 2454 and 2455 I find that it exports useRoute and useRouter, so here it is:

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')})Copy the code

In this way, not only can we successfully jump the route, but also can get the parameters from the route. This time, I tried to package again, and sure enough, there was no error.

conclusion

It is estimated that the vue family will start an era of universal hooks in the future. 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 uses in it.

If I have time, I will study it carefully and publish a more in-depth article for you. Of course, if you can’t wait for my new article, you can directly go to Vue-router-Next’s Github address:

Github.com/vuejs/vue-r…

All its examples are placed in the playground folder. I look forward to a more in-depth article after you study and understand!

Previous excellent article

  • Microsoft launches comments section on GitHub
  • Vue 3.0.3: New CSS variable passing and the latest Ref Proposal
  • You Yuxi: Ref Grammar Sugar Proposal
  • “Double 11 small black box is cool? Let’s use CSS variables to improve!”
  • “Don’t underestimate the nine grid, one question can let a candidate reveal his true colors!”
  • “Mobile Layout Interview Questions to test your CSS Skills (Center)”
  • A series of confusing behaviors after setting prototype Objects as Proxies
  • Vue’s Super Fun New Feature: DOM Portal
  • A fun new feature of Vue: Introducing JS variables into CSS
  • Create your own Visual Data Map without any libraries
  • “Use of React’s Super-popular CSS-in-JS Library in the Vue Project: Styled – Components”
  • Is It Finally Vue’s Turn to Inspire React?
  • A Small Pit in Vue3 on IOS
  • Upgrade your React project to Immer instead of Immutable by 2020
  • “Soul Interrogation from the Author of React Hooks and Immutable”
  • Good news, Vue3 official document is available in Chinese!
  • Vue 3:20 Years of Status Updates
  • React 17 is officially a transition version!
  • Yu Yuxi: The Design Process of Vue3
  • The Father of Node’s refactoring Deno is finally released. Will it Replace Node after all?
  • The Vue3 beta was released early this morning and openly supports scaffolding!