第十八：路由传参 query

第一种方法：传递参数：

<RouterLink to ="/news/detail?id=naaa&title=bbbb&content=ccccccc">{{ news.title }}</RouterLink>

上面的是不对的，如果的　模板字符串里面　嵌入 js  那么应该如下所示： ${news.id}

第一种种写法：

<RouterLink :to ="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink>

第二种写法：<!-- 跳转并携带query参数（to的对象写法） -->

RouterLink :to = "{

//name:'xiang', //用name也可以跳转

path:'/news/detail',

query:{

id : news.id,

title: news.title,

content: news.content,

}

}">

{{ news.title }}

</RouterLink>

第二步：接收参数：

首先必须引入：　route　路由

import {useRoute} from 'vue-router'     // useRoute 是　hooks 的对象

const route = useRoute()　 // 接收路由的参数
// 打印query参数
console.log(route.query)　　// console.log('@',route)  // 打印出来是什么东西　用@ 符分隔

注意：　如果从一个响应式属性中去解构数据　必定失效　，所以必须加一个　toRefs

import { toRefs } from 'vue';

import {useRoute} from 'vue-router'     // useRoute 是　hooks 的对象

const route = useRoute()　 // 接收路由的参数

let {query} = toRefs(route)   // 定义一个query
// 打印query参数
console.log(route.query)　　// console.log('@',route)  // 打印出来是什么东西　用@ 符分隔