文章目录 使用案例queryparams不显示
使用案例
路由配置
const routes [ { path:/a, name:a, component:()>import(/components/aCom.vue) }, { path:/b, name:b, component:()>import(/components/bCom.vue) }]父组件两个按钮实现组件的跳转实现路由切换并传递参数
<template> <div idapp> <button click ToA>a组件</button> <button click ToB>b组件</button> <router-view></router-view> </div></template><script>export default { name: App, methods:{ ToA(){ this.$router.push({ name:a, // path:/a, query:{ id:a } }) }, ToB(){ this.$router.push({ name:b, // path:/b, query:{ id:b } }) }, }}</script> queryquery传递参数的特点
参数会以url字符串序列的方式拼接到url后面如 http://localhost:8080/a?ida 其中 http://localhost:8080/a 是urlida是我们传递过来的参数。可以使用path,也可以使用name参数一定会显示在url中页面刷新后参数仍然存在 this.$router.push({ name:a, // path:/a, query:{ id:a } })使用this.route.query.id可以获取到我们刚才路由传过来的id 这两个地方的名称必须相同
paramsparams传参可以分为显示和不显示两种
不显示特点
参数不会显示在url中如http://localhost:8080/b可以使用path,也可以使用name页面刷新后参数不存在 this.$router.push({ // name:a, path:/a, params:{ id:a } })## 显示特点 1. routers中的url需要使用占位符占位路由中的数据位置以供显示 2. 参数不会显示在url中如http://localhost:8080/b/b 3. **可以使用name,不可以使用path** 4. **页面刷新后参数仍存在**路由重新设置:jsconst routes [ { path:/a/:id, name:a, component:()>import(/components/aCom.vue) }, { path:/b/:id, name:b, component:()>import(/components/bCom.vue) }]编程式路由
this.$router.push({ name:a, params:{ id:a } })