• 路由的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配置