Several ways of routing parameters

Routing parameters are divided into params parameters and query parameters, and params parameters can be divided into displaying parameters in the url address bar and not displaying parameters.

Method 1: pass parameters in params (display parameters)

Display parameters in the path. When configuring the route, a placeholder is required. The address bar is displayed as /search/123

Refresh the page, the parameters are still there

If you want to indicate that the params parameter is optional, you can add ?

path: '/search/:keyword?'

Declarative Navigation

<router-link :to="/search/123">搜索</router-link>

programmatic navigation

This.$router.push({'/search/keyword'})

Method 2: pass parameters in params (parameters are not displayed)

No parameters are displayed in the path. When configuring the route, no placeholder is required, but the name is required

Refresh the page, the parameters disappear

path: '/search',

name:'search',

Declarative Navigation

<router-link :to="{name:'search',params:{keyword:123}}">搜索</router-link>

programmatic navigation

This.$router.push({

​ name:'search',

​ params:{ keyword:123 }

})

Get params parameters (note that this is route, not router)

this.$route.params.keyword

Method 3: query parameters

There is no need to set a placeholder, the address bar is displayed as /search?keyword=123

Both name and path can be used for jump routing

path: '/search',

Declarative Navigation

<router-link :to="{path:'/search',query:{keyword:123}}">搜索</router-link>

programmatic navigation

This.$router.push({

​ path:'/search',

​ query:{ keyword:123 }

})

Get query parameters

this.$route.query.keyword

 -----------------------------------------------

So can the params parameter and the query parameter be passed at the same time? sure

this.$router.push({

​ name:'search',

​ params:{ keyword:123 },

​ query:{ id:001 }

});

When passing parameters in the form of objects, you need to pay attention. If params are used, only name can be used, and path cannot be used, because if path is provided, params will be ignored, and the params obtained at this time will be undefined

 --------------------------------------------

Issues related to routing parameters

The params parameter can be passed or not, but if it is passed as an empty string, how to solve it?

Use undefined to resolve

this.$router.push({

​ name:'search',

​ params:{ this.keyword || undefined },

​ query:{ id:001 }

});