页面跳转的几种方式
一: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添加新纪录,而是直接替换掉当前记录。点击返回,会跳转到上上一个页面。上一个记录是不存在的。