Routing parameters

Route parameters

1.query, String writing , Object writing

query The parameter is directly behind the path ?  Add parameters

 

<router-link to="/Student/Xinxi/Detail?id=666&title= How do you do ">

         news 01 </router-link>

 

The receiving party , By routing route, receive     You can use interpolation syntax    { {$route.query.xxx}}

 

But you have to transfer data dynamically , Such data is dead id=666,title=" How do you do "

therefore ：   ?key=value&key=value

 

 <router-link :to="`/Student/Xinxi/Detail?id=${m.id}&title=${m.name}`"> 
            <!--  : Add a colon and treat it all as js Expression to write    `` It becomes a string again , But the template string has to be mixed with js Expression, so ${}  -->
        {
   {m.name}} </router-link> 

 

2.params Parameters , character string , Object writing

parmas Parameters Direct path / Parameters

 

      

params String writing

<router-link to="/Student/Xinxi/Detail/666/ How do you do ">

         news 01 </router-link>

 

But the router doesn't know the last two of this route /666/ Hello, it's a parameter , So when configuring routing rules

should     stay Xinxi( This last level of routing is there path Add a placeholder )

path: 'Xinxi/Detail/:id/:title'    So the router knows the back The two parameters are not routing paths but parameters

params The writing method of parameter passing object

 <router-link
          v-bind:to="{
              name:'Detail',
                params:{
                    id:m.id,
                    name:m.name
                }
            }"
          >
              {
   {m.name}}
          </router-link>

 

 

 

ps： Note that there params The ginseng have to use name:"xxx" As the name of the component to jump to , Can't write path:/xx/xx/ 

 

 

 

The methods of parameter transmission can be divided into params Biography and reference query The ginseng , and params Chuan Shen can be divided into url Display parameters in , And not displaying parameters

1.params The ginseng ( Display parameters ), It can also be divided into declarative , And programming

~ declarative router-link: The way is through router-link Component's to Attribute implementation , The parameters of the sub route need to be configured in advance

<router-link  to="/home/x">
 Jump to sub route 
</router-link>

{
path: '/child/:id',
component:Child
}

 

2. programmatic this.$router.push: It is also necessary to configure the parameters of the sub route in advance .

{
path: '/child/:id',
component:Child
}

this.$router.push({
    path:'/child/${id}',
})

receive :this.$route.params.id 

2.params The ginseng ( Do not display parameters ), It can also be divided into declarative , And programming , Unlike the display parameters , Here is the alias of routing name For value transfer

 

<router-link :to="{name:'Child',params:{id:1}}"> Jump to sub route </router-link>

 

{
path: '/child',
name: 'Child',
component: Child
}

this.$router.push({
name:'Child',
params:{
id: 1
}
})

4. Routing component delivery props The data is convenient for the routing component to receive

props Pass data to facilitate receiving routing components (detail) receive , Don't keep writing $route.query.xxx perhaps

yes $route.params.xxx, redundancy , Just write... In the configuration props:['xxx','xxx'], Then direct interpolation Syntax { {xxx}} You can use it.

The first way to write it :props Value as object , All... In this object key-value All combinations will eventually pass props Pass to Detail Components

for example :   { component:Detail,props:{a:1,b:'hello'}      }

This means to detail Routing component delivery props Parameters , And for the object , If received, it must be in this component

props:['a','b'] receive

 

 

The second way : Then route all received params Parameters through props Pass on to Detail Components

props:ture

 

  It means that the received parameters are marked with props Form to Detail, Such as （id,title）,

So in Detail Components can receive props:['id','title']

 

The third way :props The value is a function , Each set of objects returned by this function key-value Will pass props Pass to Detail Components ( Biography query,params)

props:function($route){   // This is a callback function , We define that we do not call , from vue-router call , And pass in the argument $route, We receive... In the form of formal parameters ??? It should be understood in this way 
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'xxxxx'
								}
							}

 

router And route difference

1.router yes VueRouter An object of , adopt Vue.use（VueRouter） and VueRouter Constructor gets a router Instance object of , This object is a global object , Contains all routes , Contains many key objects and attributes , for example history object ,

$router.push（{path:'/path'}）, The essence is to history Add a route to the stack , In our opinion, it's switching routes , But the essence is to add a histoty Record

$router.replace（{path:'/path'}）, Replace route , There is no history .

2.route It is a jump route object , Every route will have a route object , It's a local object , You can get the corresponding name,path,params,query etc. .

$route.path character string , Equal to the path of the current routing object , It will be resolved as an absolute path , Such as “/index/”

$route.params object , Contains the key value pairs of dynamic fragments and full matching fragments in the route

$route.query object , Contains key value pairs for query parameters in the route , for example , about /index?id=1, You'll get $route.query.id == 1.

Routing reference plane test questions

 

1. Routing parameters () Object writing ,path Can it be combined params Parameters used together ?

answer : When routing jump passes parameters , The object can be written as ,name、path form , But here's the thing ,path This kind of writing cannot be compared with params Parameters are used together

 

 this.$router.push({path:'/search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}})

   },
 

 

2. How to specify params Parameters can be transferred or not ?

such as : When configuring routing parameters , Stand in position (params Parameters ), But when the route jumps, it will not be delivered , There will be problems with the path

If routing requires delivery params Parameters , But you just don't pass params Parameters , Find one thing ,url There will be problems. ,

How to specify params Parameters can be passed , Or not , When configuring routes , Put a question mark behind the station

 

 {
            path: '/search/:keyword?',          /*  The sub route is configured with parameters in advance  */
            component: Search,
            meta:{show:true},
            name:'search'
        },

 

3.params Parameters can be passed or not , But if you pass an empty string , How to solve ?

Such as :

this.$router.push({ name:'search',params:{keyword:''},query:{k:this.keyword.toUpperCase()}         })

 

Use undefined solve ,params Parameters can be passed 、 Don't deliver ( Empty string )

this.$router.push({ name:'search',params:{keyword:''||undefined},query:{k:this.keyword.toUpperCase()}         })