JavaScript 页面跳转、页面重定向

JavaScript 实现页面跳转重定向可以使用以下两种方法：

1. window.location.replace(“url”)

类似 HTTP 重定向

将地址替换成新 url，该方法通过指定 URL 替换当前缓存在历史里（客户端）的项目，因此当使用 replace 方法之后，你不能通过"前进"和"后退"来访问已经被替换的URL，这个特点对于做一些过渡页面非常有用！

2. window.location.href=“url”

类似点击 a 标签的链接。

跳转到指定的 url。

例子：

// 类似 HTTP 重定向到菜鸟教程
window.location.replace("https://www.runoob.com");

// 类似点击菜鸟教程的链接（a 标签）
window.location.href = "https://www.runoob.com";

3. window.history

window.history.forward()：
forward() 方法可加载历史列表中的下一个 URL。
调用该方法的效果等价于点击前进按钮或调用 history.go(1)。
window.history.go()：
back() 方法可加载历史列表中的前一个 URL（如果存在）。
调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
window.history.go(number|URL) :
go() 方法可加载历史列表中的某个具体的页面。
该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

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

参考：

1. 菜鸟教程
2. https://www.cnblogs.com/congtt/p/10671512.html