网站建设的税率是多少,织梦绑定网站出现错误,巨野做网站,莘庄网站建设Vue3路由传参
一、传参的多种方式
1.1 拼接方式
这种方式适合传递单个参数的情况#xff0c;比如点击查看详情#xff0c;传个id这样的场景
传参#xff1a;
RouterLink to/person?id1 active-classactiveperson/RouterLink
… Vue3路由传参
一、传参的多种方式
1.1 拼接方式
这种方式适合传递单个参数的情况比如点击查看详情传个id这样的场景
传参
RouterLink to/person?id1 active-classactiveperson/RouterLink
!-- 一般是这样写动态传参 --
RouterLink :to/person?id${obj.id} active-classactiveperson/RouterLink接参
import { useRoute } from vue-router;// 接收路由传参
let route useRoute()
console.log(useRoute()--, route);
console.log(接参id , route.query.id);1.2 对象方式
对象方式适合一起传递多个参数比较清晰明了使用拼接方式虽然也能实现但杂乱无章不易维护且容易出错。 传参
RouterLink :to{path: /person,query: {id: 1,name: 王大拿,age: 56}} active-classactiveperson
/RouterLink接参
import { toRefs } from vue
import { useRoute } from vue-router;// 接收路由传参
let route useRoute()
let {query} toRefs(route)
console.log(接参id , query.value.id);
console.log(接参name , query.value.name);
console.log(接参age , query.value.age);1.3 params参数方式
params方式需要在路由上设置需要传递参数的占位如下我在person后占位3个参数且age为不必填项。id和name为必填项
// 创建1个路由器
const router createRouter({// 路由器的工作模式history: createWebHistory(),/* 多个路由配置 */routes: [{name: ren,path: /person/:id/:name/:age?,component: PersonVue}]
});也有2种方式拼接路径方式、传递对象方式
1.3.1 params拼接路径方式
传参这里不传递age因为上面设置age不是必传项
RouterLink to/person/1/王小拿 active-classactiveperson/RouterLink接参这里接params参数
import { toRefs } from vue
import { useRoute } from vue-router;// 接收路由传参
let route useRoute()
console.log(route-, route);let {params} toRefs(route)
console.log(接参id , params.value.id);
console.log(接参name , params.value.name);
console.log(接参age , params.value.age);1.3.2 params传递对象方式
** ☆这里和1.2里不一致的是**用的是name和params传递。1.2里用个是path和query传递。 传参
RouterLink :to{name: ren,params: {id: 1,name: 王大拿,age: 56}
} active-classactiveperson
/RouterLink接参这里接params参数
import { toRefs } from vue
import { useRoute } from vue-router;// 接收路由传参
let route useRoute()
console.log(route-, route);let {params} toRefs(route)
console.log(接参id , params.value.id);
console.log(接参name , params.value.name);
console.log(接参age , params.value.age);1.4 props方式
1.4.1 props方式1
基于1.3params方式传递参数开启props为true。那么就可以通过defineProps([id, name, age])直接接收参数并在页面上展示。
// 创建1个路由器
const router createRouter({// 路由器的工作模式history: createWebHistory(),/* 多个路由配置 */routes: [{name: ren,path: /person/:id/:name/:age?,component: PersonVue,props: true}]
});传参
RouterLink to/person/1/王小拿 active-classactiveperson/RouterLink接参这里通过defineProps()接参数
templatediv classpersonh3ID{{ id }}/h3h3姓名{{ name }}/h3h3年龄{{ age }}/h3/div
/templatescript langts setup namePersonCom
defineProps([id, name, age])
/script1.4.2 props方式2
通过props(route){}函数的方式传递参数。这种方式既支持params对象方式也支持query对象的方式。
一params对象方式 需要占位返回route.params
// 创建1个路由器
const router createRouter({// 路由器的工作模式history: createWebHistory(),/* 多个路由配置 */routes: [{name: ren,path: /person/:id/:name/:age?,component: PersonVue,props(route){return route.params}}]
});传参
RouterLink :to{name: ren,params: {id: 1,name: 王大拿,age: 56}
} active-classactiveperson
/RouterLink接参这里通过defineProps()接参数
templatediv classpersonh3ID{{ id }}/h3h3姓名{{ name }}/h3h3年龄{{ age }}/h3/div
/templatescript langts setup namePersonCom
defineProps([id, name, age])
/script二query对象方式 去掉占位返回route.query
// 创建1个路由器
const router createRouter({// 路由器的工作模式history: createWebHistory(),/* 多个路由配置 */routes: [{name: ren,path: /person,component: PersonVue,props(route){return route.query}}]
});传参
RouterLink :to{path: /person,query: {id: 1,name: 王大拿,age: 56}
} active-classactiveperson
/RouterLink接参这里通过defineProps()接参数
templatediv classpersonh3ID{{ id }}/h3h3姓名{{ name }}/h3h3年龄{{ age }}/h3/div
/templatescript langts setup namePersonCom
defineProps([id, name, age])
/script效果都是一样的浏览器地址不同params是路径方式query是参数拼接方式。
END
