Route parameter transmission mode

Posted by whizzkid-000 on Mon, 17 Jan 2022 21:35:56 +0100

1, Jump mode of routing

Declarative navigation: router link, with to attribute
Programming navigation: $router The push replace implementation can handle some business

2, How many parameters are there for routing parameters?

params parameter
query parameters

2.1.params parameter

It is a part of the path and needs to occupy a bit when configuring the route. The address bar appears as / search/v1/v2

//Occupancy:
path:'/search/:keyword',

2.2.query parameters

It is not part of the path. It is similar to the get request. The address bar is displayed as / search? K1 = V1 & K2 = V2, no space occupation is required

3, Routing parameters

3.1. Declarative navigation parameters

<router-link :to="'/search/'+keyword">search</router-link>
<!--http://localhost:8080/search/hhh-->
<router-link :to="{path: '/search', name: 'search', params: { keyword: hhh } }">search</router-link>

3.2. Programming navigation

//1. String form this$ router. push('/search/'+this.keyword+'?k='+this.keyword.toUpperCase());
//2. Template string
this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
//3. Object (commonly used). The object is passed. The route jumps to the params parameter. The route configuration file is required to give the route a name = = > Name: 'search'
this.$router.push({
    name:'search',
    params:{
        keyword:this.keyword
    },
    query:{
        k:this.keyword.toUpperCase()
    }
});
//http://localhost:8080/search/hh?k=HH

Object (common): this$ router. Push ({Name: "route name", params: {pass parameter}, query: {pass parameter}).
When passing parameters in object mode, if we use params in passing parameters, we can only use name, not path. If we only use query to pass parameters, we can use path

3.3.props

//router/inex.js
{
    name: "search",
    path: "/search/:keyword?",
    component: Search,
    meta: {
    	show: true,
    },
    //1. In Boolean writing, props can only pass params
    props:true
    //2. Object writing, pass some props to the route itself
    props:{
        a:1,
        b:2
    }
    //3. The function can be written by passing params parameters and query parameters to the routing component through prop (rarely used)
    props:($route)=>{
        return{
            keyword:$route.params.keyword,
            k:$route.query.k
        }
    }
    props: ($route) => ({keyword: $route.params.keyword,k: $route.query.k,}),
},

//pages/Search/index.vue
//The routing component can pass props
props:['keyword','a','b','k'],

4, Routing reference related interview questions

1. Can the route passing parameter (object writing) path be used together with the params parameter?

When routing jump passes parameters, the object can be written in the form of name and path, but the writing of path cannot be used with params parameters.
(the missing path parameter cannot match the placeholder in the path)
Therefore, the params -- > object writing method cannot be passed, but the name writing method is required

this.$router.push({
    path:'/search',
    params:{keyword:this.keyword},
    query:{k:this.keyword.toUpperCase()}
});
//The real expression is = = > http://localhost:8080/#/search?k=HH
//The correct path should be: http://localhost:8080/#/search/hh?k=HH

2. How to specify that params parameters can not be passed?

Problem scenario: when configuring a route, it is already occupied (params parameter), but it is not delivered when the route jumps.

The truth of this writing is: http://localhost:8080/#/?k=HHH
The correct path should be: http://localhost:8080/#/search/?k=HHH
If the route requires the params parameter, but you do not pass the params parameter, you will find a problem with the url

How to specify whether params can be passed or not?

solve:

When configuring a route, you can add a "route" after the placeholder? [? Represents whether to pass or not, regular question mark one or more times]

//router/inex.js
{
    name:'search',
    path:'/search/:keyword?',
    component:Search,
}

this.$router.push({
    name:'search',
    // params:{keyword:this.keyword},
    query:{k:this.keyword.toUpperCase()}
});
//Real path: http://localhost:8080/#/search?k=HHH

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

The truth of this writing is: http://localhost:8080/#/?k=， Path does not have / search
The correct path should be: http://localhost:8080/#/search?k=

//Use undefined to solve the problem: params parameter can be passed or not (pass empty string)
this.$router.push({
    name: "search",
    params: { keyword: ""||undefined },
    query: { k: this.keyword.toUpperCase() },
});

4. Can the routing component transfer props data

Yes, see 3.4

Programmer Think