页面跳转的几种方式

一：js的跳转

1.直接跳转：window.location.href

<script language="javascript" type="text/javascript">

    window.location.href="login.jsp?backurl="+window.location.href; 

    //或者

   window.location.href='http://www.baidu.com';

</script>

 

2.回到上一层页面  window.history.back(-1)

<script language="javascript">

    //标签嵌套：

    <a href="javascript:history.go(-1)">返回上一步</a>

</script>

 

二：vue跳转

1.在template中的常见写法：

<router-link to="/miniCard/statement/horizon">
     <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添加新纪录，而是直接替换掉当前记录。点击返回，会跳转到上上一个页面。上一个记录是不存在的。