What is the way for vue-router to pass parameters?

Most people do not understand the knowledge points of this article "what is the way of vue-router parameters?", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what is the way of vue-router parameters?"

Vue Router is the official route manager for Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications. The features included are:

Nested routes / View Chart

Modular, component-based routing configuration

Routing parameters, queries, wildcards

View transition effect based on Vue.js transition system

Fine-grained navigation control

Links with automatically activated CSS class

HTML5 historical mode or hash mode, automatically degraded in IE9

Custom scroll bar behavior

There are two ways to transfer parameters to vue-router: params and query

What are params and query?

Params:/router1/:id, / router1/123,/router1/789, the id here is called params

Query:/router1?id=123, / router1?id=456, the id here is called query.

Method 1:

Parameters are transmitted and received in query mode

Pass parameters:

This.$router.push ({path:'/openAccount', query: {id:id}})

Receive parameters:

This.$route.query.id

Note: the passing parameter is this.$router and the receiving parameter is this.$route

The difference between the two:

$router is a VueRouter instance. If you want to navigate to a different URL, use the $router.push method

$route is the current router jump object, in which you can get name, path, query, params, etc.

Method 2:

Parameters are transmitted and received in params mode

Pass parameters:

This.$router.push ({name:'/openAccount', params: {id: id}})

Receive parameter: this.$route.params.id

Note: params passes parameters. Push can only be name:'xxxx', not path:'/xxx', because params can only use name to introduce routes. If path is written here, the receiving parameters page will be undefined.

There is also some difference between the two, which can be understood as: query is equivalent to get request. When the page jumps, you can see the request parameters in the address bar, while params is equivalent to post request, and the parameters will not be displayed in the address bar.

Router.js

Export default new Router ({routes: [{path:'/', name: 'login', component: Login}, {path:' / register', name: 'register', component: Register}})

Components (passing parameters):

{{msg}} click here to news page export default {name: 'HelloWorld', data () {return {msg:' Welcome to Your Vue.js App'}}, methods: {routerTo () {this.$router.push ({name: 'register', params: {userId: 123}}); / / the name value here is the name / / this.$router.push ({path:' / register', query: {userId: 123}}) in the route.js definition. / / query mode}

Component (receive parameters)

The above {{this.$route.params.userId}} or {{this.$route.params.userId}} is the content of this article on "what is the way to transmit parameters in vue-router". I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.