关于vue中路由跳转的一些认识和总结

it2022-05-05  138

vue中路由跳转的三种 方式

一、router-link 浏览器解析后跳转

不带参数写法:<router-link to="{path:/home}"> 带参数写法:<router-link to='{path:/home,params:{id:1}}'>

提示:跳转的路径需要在router.js下引入 二、this.$router.push({path:’/需要跳转的地址’}) (函数调用) 不带参数

this.$routwe.push('/home'); this.$router.push({name:'home'}); this.$router.push({path:'/home'})

带参数 1.query传参

this.$router.push({name:'home',query:{id:'1'}}); this.$router.push({path:'/home',query}:{id:1});

2.params传参

this.$router.push({name:'home',params:{id:1}})

3.query和params的区别 query类似get,跳转之后页面url后面会拼接参数,类似?id=1,非重要性的可以这样传,密码之类还是用params刷新页面id还在 params类似post,跳转页面之后url后面不会拼接参数,但是刷新页面id会消失 取参

html中想要拿到参数:$route.params.id script想要拿到参数 this.$route.params.id

三、this.$router.replace()(用法同push)

四、this.$router.go(n)

this.$router.go(n) //向前或者向后跳转n个页面,n可以为正整数或负整数 区别 - this.$router.push //跳转到指定的url路径,冰箱history栈中添加一个记录,点击后退会返回到上一个页面 - this.$router.replace //跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面(就是直接替换了当前页面) - this.$router.go(n) //向前或者向后跳转n个页面,n可为正整数或负整数

崇尚技术,面对广阔无垠的技术栈,只是海,只有不断的一点一点的积累,慢慢总结。我相信只要坚持下去,每个平凡的人都能活出自己的精彩!!!!


最新回复(0)