• 路由的query参数
  1.传递参数
  

  <!-- 跳转并携带query参数，to的字符串写法 -->
  <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
  				
  <!-- 跳转并携带query参数，to的对象写法（推荐） -->
  <router-link 
  	:to="{
  		path:'/home/message/detail',
  		query:{
  		   id: m.id,
         title: m.title
  		}
  	}"
  >跳转</router-link>

  2.接收参数
  
  查看代码

  $route.query.id
  $route.query.title

  
  
  src/router/index.js
  
  

  查看代码

  import VueRouter from "vue-router";
  import Home from '../pages/Home'
  import About from '../pages/About'
  import News from '../pages/News'
  import Message from '../pages/Message'
  import Detail from '../pages/Detail'
  
  // 创建并暴露一个路由器
  export default new VueRouter({
    routes:[
      {
        path:'/about',
        component:About
      },
      {
        path:'/home',
        component:Home,
        children:[
          {
            path:'news',
            component:News
          },
          {
            path:'message',
            component:Message,
            children:[
              {
                path:'detail',
                component:Detail
              }
            ]
          }
        ]
      }
    ]
  })

  src/pages/Message.vue

  查看代码

  <template>
    <div>
      <ul>
        <li v-for="m in messageList" :key="m.id">
          <!-- 跳转路由并携带query参数，to的字符串写法 -->
          <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
                        {{m.title}}
      				 </router-link>&nbsp;&nbsp; -->
  
          <!-- 跳转路由并携带query参数，to的对象写法 -->
          <router-link :to="{
                              path:'/home/message/detail',
                              query:{
                                id:m.id,
                                title:m.title
                              }
                            }">
            {{m.title}}
        </router-link>&nbsp;&nbsp;
        </li>
      </ul>
      <hr/>
      <router-view></router-view>
    </div>
  </template>
  
  <script>
    export default {
      name:'News',
      data(){
        return{
          messageList:[
            {id:'001',title:'消息001'},
            {id:'002',title:'消息002'},
            {id:'003',title:'消息003'}
          ]
        }
      }
    }
  </script>

  src/pages/detail.vue

  查看代码

  
  <template>
      <ul>
          <li>消息编号：{{ $route.query.id }}</li>
          <li>消息标题：{{ $route.query.title }}</li>
      </ul>
  </template>
  
  <script>
      export default {
          name:'Detail'
      }
  </script>

• 命名路由
  1.作用：可以简化路由的跳转
  2.使用
    a.给路由命名
   
  查看代码

  {
  	path:'/demo',
  	component:Demo,
  	children:[
  		{
  			path:'test',
  			component:Test,
  			children:[
  				{
            name:'hello' // 给路由命名
  					path:'welcome',
  					component:Hello,
  				}
  			]
  		}
  	]
  }

            b.简化跳转 

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		    id:666,
        title:'你好'
		}
	}"
>跳转</router-link>

• 路由的params参数
  
  1.配置路由，声明接收params参数
  
  查看代码

  {
  	path:'/home',
  	component:Home,
  	children:[
  		{
  			path:'news',
  			component:News
  		},
  		{
  			component:Message,
  			children:[
  				{
  					name:'xiangqing',
  					path:'detail/:id/:title', // 使用占位符声明接收params参数
  					component:Detail
  				}
  			]
  		}
  	]
  }

       2.传递参数
        注意：路由携带params参数时，若使用to的对象写法，则不能使用path的配置项，必须使用name配置!

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
       title:'你好'
		}
	}"
>跳转</router-link>

3.接收参数

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

demo:
    src/router/index.js

import VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',	// 使用占位符声明接收params参数
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
              
                <!-- 跳转路由并携带params参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">
                    {{m.title}}
                </router-link>&nbsp;&nbsp; -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->
                <router-link :to="{
                    name:'xiangqing',
                    params:{
                        id:m.id,
                        title:m.title
                    }
                }">
                    {{m.title}}
                </router-link>&nbsp;&nbsp;
            </li>
        </ul>
        <hr/>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name:'News',
        data(){
            return{
                messageList:[
                  {id:'001',title:'消息001'},
                  {id:'002',title:'消息002'},
                  {id:'003',title:'消息003'}
                ]
            }
        }
    }
</script>

src/pages/Detail.vue

<template>
  <ul>
    <li>消息编号：{{ $route.params.id }}</li>
    <li>消息标题：{{ $route.params.title }}</li>
  </ul>
</template>

<script>
    export default {
        name:'Detail'
    }
</script>

• 路由的props配置