Vue知识点：路由的query参数

//router >>> index.js
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
                  }
               ]
            },
         ]
      }
   ]
})

//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>
             // 跳转路由并携带query参数，to的对象写法
             <router-link 
                :to="{
                   path: 'home/message/detail',
                   query: {
                      id: m.id,
                      title: m.title
                   }
                }">
                {{ m.title }}
             </router-link>
          </li>
       </ul>
       <hr>
       <router-view></router-view>
    </div>
 </template>

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

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

<script>
export default {
   name: 'Detail',
   data() {
      mounted(){
      console.log(this.$route)
      }
   }
}
</script>

总结：
1. 传递参数
(1). // 跳转路由并携带query参数，to的字符串写法

<router-link 
    :to="`home/message/detail?id=${m.id}&title=${m.title}`">
    {{ m.title }}
</router-link>

(2).// 跳转路由并携带query参数，to的对象写法

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

2.接受参数

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