Be careful to avoid pits, Vue Router 4: routing parameters are not available during created/setup

If you have dreams and dry goods, you can search for [Great Move to the World] on WeChat and pay attention to this Shawanzhi who is still washing dishes in the early hours of the morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.

As you may have noticed, the VUE 3 version of Vue router (4.0) has some breaking changes from its previous version. Most of the Vue Router API is unchanged, and the migration process is pretty straight forward. However, a very subtle but important change is often overlooked, which can lead to hard-to-debug behavior. All navigation is now asynchronous .

If you're wondering why query parameters in URLs are nowhere to be found in your setup method or created hook, but when inserted, they still appear in the template, don't Leave, let's find out.

All navigation is now asynchronous

To explore this, we will use barebones of a Vue 3 skeleton app with Vue router 4.0 already installed. You can follow the code in this repo .

Address: https://github.com/Code-Pop/router-4-async

After the project is downloaded, run npm iinstall and then run npm run serve , the interface is as follows:

If you now add some query parameters to the URL, such as <a href="http://localhost:8080/?param=1" target="blank">http://localhost:8080/?param=1</a> , the page will refresh and the parameters will be displayed on the interface.

Let's take a look at the contents of App.vue , we added a hook created to the component. You'll see a console.log line that prints the contents of $router.query as we did in the template.

 <template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>

  <router-view/>

  Query: 
  <pre>{{ $route.query }}</pre>
</template>

<script>
export default {
  data: () => ({}),
  created () {
    console.log(this.$route.query)
  }
}
</script>

Let's go ahead and run the experiment again with and without query parameters as before.

You'll notice that no matter how many parameters are added, or how many times the page is reloaded, the console prints this.$route.query is empty.

Next, let's solve this problem.

As mentioned at the outset, an often overlooked breaking change in Vue Router 4 is that all navigation is now asynchronous . This becomes more apparent when processing transition as the docs suggest, because when the Router goes from being empty to being filled with data, it will trigger an animation.

The reason we can see the parameters in the browser, but not in the console, is because Vue is reactive and updates the HTML as soon as the Router query object is available. Remember, it's asynchronous now. This process is so fast that to us it seems to be there all the time, when processing query parameters in setup functions or lifecycle hooks (like created() ) Might be really confusing.

fix the problem

Fortunately, the solution to this problem is very simple. We only need to go to main.js , wait for the route to be ready and then mount the program, as shown below:

 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)

// Replace -> app.mount('#app')
router.isReady().then(() => {
    app.mount('#app')
})

Now, go back to the browser, add parameters and reload, and you should see our parameter information on the console.

The bugs that may exist in editing cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, here is a useful BUG monitoring tool , Fundebug .

Author: Marina Mosti Translator: Front-end Xiaozhi Source: medium

original:
https://www.vmastery.com/blog/vue-router-4-rute-params-not-available-on-created-setup/

comminicate

The article is continuously updated every week. You can search for "Big Move to the World" on WeChat to read and update it as soon as possible (one or two articles earlier than the blog). This article GitHub https://github.com/qq449245884/xiaozhi has been included and sorted. Many of my documents, welcome to Star and improve, you can refer to the test center to review for interviews, and pay attention to the public account, reply to the benefits in the background, you can see the benefits, you know.