Vue3学习-vue-router之路由传参

传参方案一：RouterLink 字符串

//传值
<RouterLink to="/page?a=1&b=2">{{ RouterLink 字符串传参 }}</RouterLink>
//取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { query}= toRefs(useRoute())
console.log(query.a)
console.log(query.b)

传参方案二：RouterLink 对象

• query传参

//传值
<RouterLink :to="{ path:'/page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
<RouterLink :to="{ name:'page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { query}= toRefs(useRoute())
console.log(query.a)
console.log(query.b)

• params

// 传 params 必须 用 name 配合
// 并且传值不能为非普通数据类型
<RouterLink :to="{ name:'page', params: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//路由需配置传参占位
{//path:'/page/:a/:b', path:'/page/:a/:b?', // b 为非必传name:'page',......
}
//取值-解构取值
import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const { params }= toRefs(useRoute())
console.log(params.a)
console.log(params.b)

传参方案三：RouterLink 对象 + Props

// 传 params 必须 用 name 配合
// 并且传值不能为非普通数据类型
<RouterLink :to="{ name:'page', params: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
<RouterLink :to="{ name:'page', query: { a:1,b:2 } }">{{ RouterLink 字符串传参 }}</RouterLink>
//路由需配置传参占位
{//path:'/page/:a/:b', path:'/page/:a/:b?', // b 为非必传name:'page',// 将 params 作为props 方式传给组件//props: true,  // 配置项写法props(route){   // 函数式写法return {...route.query}},props：{   // 对象式写法a:1,b:2},......
}
//取值-解构取值
defineProps({ a,b })
console.log(a)
console.log(b)