vue项目中如何实现路由跳转(vue中动态路由的跳转)
<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)//后退
}
},
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com