转 页⾯跳转的⼏种⽅式
页⾯跳转的⼏种⽅式
⼀:js的跳转
1.直接跳转:
<script language="javascript"type="text/javascript">
//或者
</script>
2.回到上⼀层页⾯
<script language="javascript">
//标签嵌套:
<a href="javascript:history.go(-1)">返回上⼀步</a>
</script>
⼆:vue跳转
1.在template中的常见写法:
<router-link>
<button class="btn btn-default">点击跳转</button>
</router-link>
2.this.$router.go()
this.$router.go(1) //在浏览器记录中前进⼀步
this.$router.go(-1) //后退⼀步记录
this.$router.go(3) //前进三步记录
3.this.$router.push()
A:this.$router.push({ path: '/home', query: { site: '1111'} })
query传参,⽤path属性对应跳转路径,类似于get提交,参数是在路径⾥显⽰的。
⼦页⾯接收时var cityId = this.$route.query.cityId
B:this.$router.push({ name: 'Home', params: { site: '2222'} })
params传参,⽤name属性对应跳转路径,类似于post提交,参数不会出现在跳转路径⾥。
⼦页⾯接收时var cityId = this.$route.params.cityId
两个同级页⾯,⽤query传参。A通过路由带参跳转到B页⾯,然后通过参数过滤掉B页⾯的⼀些数据。之后刷新B页⾯,由于参数是在路径⾥的,还是过滤掉的数据,这个时候要么在B页⾯⼊⼝进⼊B页⾯,要么就得在页⾯再做处理才能符合需求,改⽤params之后就没这个问题了。
4. this.$router.replace() ⽤法同上
打开新的页⾯,不会像history添加新纪录,⽽是直接替换掉当前记录。点击返回,会跳转到上上⼀个页⾯。上⼀个记录是不存在的。