欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

简易讲解:HTML和JS实现页面跳转的多种方法

最编程 2024-07-22 15:53:23
...

页面跳转的几种方式
一:js的跳转

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

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

    window.location.href="a.jsp?callback="+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()

Athis.$router.push({ path: '/home', query: { site: '1111'} }) 

query传参,用path属性对应跳转路径,类似于get提交,参数是在路径里显示的。
子页面接收时 
var cityId = this.$route.query.cityId
Bthis.$router.push({ name: 'Home', params: { site: '2222'} })

params传参,用name属性对应跳转路径,类似于post提交,参数不会出现在跳转路径里。
子页面接收时 
var cityId = this.$route.params.cityId

两个同级页面,用query传参。A通过路由带参跳转到B页面,然后通过参数过滤掉B页面的一些数据。之后刷新B页面,由于参数是在路径里的,还是过滤掉的数据,这个时候要么在B页面入口进 入B页面,要么就得在页面再做处理才能符合需求,改用params之后就没这个问题了。

  1. this.$router.replace()
    用法同上
     打开新的页面,不会像history添加新纪录,而是直接替换掉当前记录。点击返回,会跳转到上上一个页面。上一个记录是不存在的。

推荐阅读