Nested (multi-level) childrn routes, query parameters, named routes, replace attribute, props configuration of routes, params parameters of routes

Even once , I want to run on this planet .

Configure routing rules , Use children Configuration item ：

routes:[
	{
    
		path:'/about',
		component:About,
	},
	{
    
		path:'/home',
		component:Home,
		children:[ // adopt children Configure child routing 
			{
    
				path:'news', // Don't write here ：/news
				component:News
			},
			{
    
				path:'message',// Don't write here ：/message
				component:Message
			}
		]
	}
]

1. Jump （ To write the full path ）：

<router-link to="/home/news">News</router-link>

query Parameters

Route nesting ：

//  Create a router 
const router = new VueRouter({
    
    routes: [
        {
    
            path: '/about',
            component: About
        },
        {
    
            path: '/home',
            component: Home,
            children: [
                {
    
                    path: 'home-news',
                    component: News
                },
                {
    
                    path: 'home-message',
                    component: Message,
                    children: [
                        {
    
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        },

    ]
})

Jump route and carry query Parameters ,to String writing

<ul>
    <li v-for="m in messageList" :key="m.id">
    <!--  Jump route and carry query Parameters ,to String writing  -->
        <router-link :to="`/home/home-message/detail?id=${m.id}&title=${m.title}`">{
    {
    m.title}}</router-link>&nbsp;&nbsp;
    </li>
</ul>

Jump route and carry query Parameters ,to The object of writing

<!--  Jump route and carry query Parameters ,to The object of writing  -->

<router-link :to="{
    
    path:'/home/home-message/detail',
    query:{
    
        id:m.id,
        title:m.title
    }
}">
    {
    {
    m.title}}
</router-link>

Get the passed information according to the component

<ul>
    <li> Message number {
    {
    $route.query.id}}</li>
    <li> Message title {
    {
    $route.query.title}}</li>
</ul>

Named route

1. effect ： It can simplify the jump of routing .

2. How to use

   1. Name the route ：

{
    
	path:'/demo',
	component:Demo,
	children:[
		{
    
			path:'test',
			component:Test,
			children:[
				{
    
                    name:'hello' // Name the route 
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

Simplify jump ：

<!-- Before simplification , You need to write the full path  -->
<router-link to="/demo/test/welcome"> Jump </router-link>

<!-- simplified , Jump directly by name  -->
<router-link :to="{name:'hello'}"> Jump </router-link>

<!-- Simplify the writing method and transfer parameters  -->
<router-link 
	:to="{
    
		name:'hello',
		query:{
    
		   id:666,
            title:' Hello '
		}
	}"
> Jump </router-link>

6. The routing params Parameters

1. Configure the routing , To declare acceptance params Parameters

   {
         
   	path:'/home',
   	component:Home,
   	children:[
   		{
         
   			path:'news',
   			component:News
   		},
   		{
         
   			component:Message,
   			children:[
   				{
         
   					name:'xiangqing',
   					path:'detail/:id/:title', // Use placeholder declarations to receive params Parameters 
   					component:Detail
   				}
   			]
   		}
   	]
   }
   

2. Pass parameters

   <!--  Jump and carry params Parameters ,to String writing  -->
   <router-link :to="/home/message/detail/666/ Hello "> Jump </router-link>
   				
   <!--  Jump and carry params Parameters ,to The object of writing  -->
   <router-link :to="{ name:'xiangqing', params:{ id:666, title:' Hello ' } }" > Jump </router-link>

Particular attention ： Routing carries params When parameters are , If you use to The object of writing , Cannot be used path Configuration item , You have to use name To configure ！

3. Receiving parameters ：

   $route.params.id
   $route.params.title

7. The routing props To configure

effect ： Make it easier for routing components to receive parameters

{
    
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	// 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 
	// props:{a:900}

	// The second way ：props The value is Boolean , The Boolean value is true, Then route all received params Parameters through props Pass to Detail Components 
	// props:true
	
	// 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 
	props($route){
    
		return {
    
			id:$route.query.id,
			title:$route.query.title
		}
	}
}

8.<router-link> Of replace attribute

1. effect ： Controls the mode of operating browser history when routing jumps
2. Browser history can be written in two ways ： Respectively push and replace,push Is to add history ,replace Is to replace the current record . The default value for route jump is push
3. How to open replace Pattern ：<router-link replace .......>News</router-link>