传参方案一: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 对象
< 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)
< RouterLink : to= "{ name:'page', params: { a:1,b:2 } }" > { { RouterLink 字符串传参 } } < / RouterLink>
{ path : '/page/:a/: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
< 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?' , name : 'page' , props ( route ) { return { ... route. query} } , props:{ a : 1 , b : 2 } , ... ...
}
defineProps ( { a, b } )
console. log ( a)
console. log ( b)