第一种方法:传递参数:
<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) // 打印出来是什么东西 用@ 符分隔