转 页⾯跳转的⼏种⽅式

转 

页⾯跳转的⼏种⽅式

⼀：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添加新纪录，⽽是直接替换掉当前记录。点击返回，会跳转到上上⼀个页⾯。上⼀个记录是不存在的。