Vue 2.x – 多级路由/query传参

3.多级路由（多级路由）

1. 配置路由规则，使用children配置项：

   routes:[
   {
       path:'/about',
       component:About,
   },
   {
       path:'/home',
       component:Home,
       children:[ //通过children配置子级路由
           {
               path:'news', //此处一定不要写：/news
               component:News
           },
           {
               path:'message',//此处一定不要写：/message
               component:Message
           }
       ]
   }
   ]

2. 跳转（要写完整路径）：

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

4.路由的query参数

1. 传递参数

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

2. 接收参数：

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

   代码

   https://github.com/icrons/Vue-Learn/tree/master/31_src_%E5%A4%9A%E7%BA%A7%E8%B7%AF%E7%94%B1

https://github.com/icrons/Vue-Learn/tree/master/32_src_%E8%B7%AF%E7%94%B1query%E4%BC%A0%E5%8F%82