The difference between this.$router and this.$route in Vue and the push() method

The official document states:

By injecting the router, we can access the router through this.$router in any component, and we can also access the current route through this.$route

It can be understood as:

this.$router is equivalent to a global router object, which contains many properties and objects (such as history object). Any page can call its push(), replace(), go() and other methods.

this.$route represents the current route object. Each route has a route object, which is a local object that can obtain the corresponding name, path, params, query and other attributes.

About the push() method:

To navigate to a different URL, use the router.push method. This method adds a new record to the history stack, so when the user clicks the browser back button, it returns to the previous URL.

When you click on a <router-link>, this method is called internally, so clicking on <router-link :to="..."> is equivalent to calling router.push(...).

The push() method call:

    // string this.$router.push('home')
 
    //Object this.$router.push({path:'home'})
 
    //Named route this.$router.push({name:'user', params:{userId: '123'}})
 
    //With query parameters, becomes /register?plan=private
    this.$router.push({path:'register', query:{plan:private}})

Note: If path is provided, params will be ignored, which is not the case for query in the above example. Instead, you need to provide a route name or write the full path with parameters as shown in the following example:

    const userId = '123';
 
    this.$router.push({path:`/user/${userId}`}); //->/user/123
 
    this.$router.push({name:'user', params:{userId}}); //->/user/123
 
    //params here are not effective this.$router.push({path:'/user', params:{userId}}); //->/user

The same rule applies to the to property of the router-link component.

Summarize:

params is used for passing parameters. In push, it can only be name:'xxx', not path:'/xxx', because params can only use name to introduce routes. If path is written here, the page receiving the parameters will be undefined.

Routing parameter passing method:

1. Handwrite the complete path:

    this.$router.push({path: `/user/${userId}`});

Get parameters: this.$route.params.userId

2. Pass with params:

    this.$router.push({name:'user', params:{userId: '123'}});

Get parameters: this.$route.params.userId

URL format: URL without parameters, http:localhost:8080/#/user

3. Use query to pass:

    this.$router.push({path:'/user', query:{userId: '123'}});

Get parameter: this.$route.query.userId

URL format: URL with parameters, http:localhost:8080/#/user?userId=123

To put it bluntly, query is equivalent to a get request, and you can see the request parameters in the address bar when the page jumps. Params is equivalent to a post request, and the parameters are not displayed in the address bar.

Note that nested paths starting with / are treated as root paths. This lets you take advantage of nested components without having to set up nested paths.

Summarize

This concludes this article about the difference between this.$router and this.$route in Vue and the push() method. For more information about the difference between this.$router and this.$route in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!