7、路由的query参数、params参数

params参数

属于路径的一部分，需要占位（router——index.js文件夹）

{
    name:'hello', //命名路由
    path:'detile/:id/:title',  // :id/:title表示占位
    component:Detile
}

在 detile.vue 组件中：

<span>id是：{{$router.params.id}}</span>
<span>title是:{{$router.params.title}}</span>

在 message.vue 组件中：

<!-- 路由的params参数：需要占位 -->
    <router-link :to="{
        name:'hello',  //命名路由  同于 path:'/home/message/detile'
        params:{
            id:item.id,
            title:item.title
        }
    }">
        {{item.title}}
    </router-link>

query参数（有两种书写形式）

不属于路径的一部分，不需要占位

在 detile.vue 组件中：

<span>id是:{{$route.query.id}}</span> <br>
<span>title是:{{$route.query.title}}</span>

在 message.vue 组件中：

way1：

 <router-link :to="{
         name:'hello',
         query:{
              id:item.id,
              title:item.title
           }
     }">
    {{item.title}}
 </router-link>

way2：

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