vue中动态路由的跳转(name | path)&& 前进后退 && replace
2023-06-13 09:15:27 时间
<button @click="tiaozhuan">去到新的页面</button>
<button @click="go">前进</button>
<button @click="back">后退</button>
methods: {
tiaozhuan(){
// this.$router.push({name:'me'}) //组件name跳转
// this.$router.push({path:'/me/text'}) //组件path跳转
// this.$router.push({name:'weather',params:{city:'北京'}})
//组件name跳转 带参数 如果使用name路由并且需要传递参数,需要搭配params一起
// this.$router.push({path:'/weather/天津',params:{city:'北京'}})
//天津 两种参数都存在的时候,path中的参数会起作用
// this.$router.push({path:'/weather/北京?username=jia&password=123456'}) //传值
this.$router.push({path:'/weather/牡丹江',query:{username:'jiajia',password:123456}})
//传值 分开写会自动拼接到path中
// this.$router.replace({path:'/weather/牡丹江',query:{username:'jiajia',password:123456}},()=>{
// console.log('成功替换了页面,replace有回调函数')
// }) //去到了path页面后,不能回退到上一个页面,回退的只能是浏览器标签页
// console.log(this)
},
go(){
this.$router.go(1)//前进 数字可根据情况定义 history不够的话,是失败的
},
back(){
this.$router.go(-1)//后退
}
},
相关文章
- Unity【Bounds & Vector3 Cross】- 如何判断一个物体是否在一个凸边体三维区域内
- TVP尖峰对话李开复&沈春华:AI未来进行式与技术的发展
- New Edge & Chromium Error - Package is invalid: 'CRX_VERSION_NUMBER_INVALID'
- 细则发布!2022 SD-WAN & SASE Awards年度评选诚邀您的参与
- Garadle 插件扩展属性&源集SourceSets
- 00SEC-D&D数据泄露报警日报【第4期】
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- 最长回文子串&最长子串&第K大的数字&atoi
- Vue & Element
- 非约束委派&&约束委派
- Geekpwn 2020云端挑战赛 Noxss & umsg
- 谈谈你对SSM简答题的理解 && SpringMVC执行流程
- ORA-30455: summary contains VARIANCE without corresponding SUM & COUNT ORACLE 报错 故障修复 远程处理
- netbios amp DDOS攻击.c
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue结合Redis实现性能优化(vue引入redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- JavaScript布尔操作符解析&&||!