1、接收参数使用route,route包含路由信息,接收参数有两种方式,params和query
path跳转只能使用query传参,name跳转都可以
params:获取来自动态路由的参数
query:获取来自search部分的参数
写法
- path跳,query传
传
import { useRouter } from 'vue-router' export default { setup() { const router = useRouter(); router.push({ path: '/home', query: { id: 1 } }); } }
接
import { useRoute } from 'vue-router' export default { setup() { const route = useRoute(); console.log(route.query.id); } }
- name跳,query传
传
import { useRouter } from 'vue-router' export default { setup() { const router = useRouter(); router.push({ name: 'home', query: { id: 1 } }); } }
接
import { useRoute } from 'vue-router' export default { setup() { const route = useRoute(); console.log(route.query.id); } }
- name跳,params传(路由处必须配置动态路由)
传
import { useRouter } from 'vue-router' export default { setup() { const router = useRouter(); router.push({ name: 'home', params: { id: 1 } }); } }
接
import { useRoute } from 'vue-router' export default { setup() { const route = useRoute(); console.log(route.params.id); } }