【Vue/JS】打开新页面，返回上一页面并刷新数据

跳转页面

js方法: 参考链接

window.open('http://www.baidu.com','_blank');         //新页面打开
window.open('http://www.baidu.com','_self');          //当前页面打开

html标签:

//在a标签中跳转，用target：
<a href="http://www.baidu.com" target="_blank">
<a href="http://www.baidu.com" target="_self">

vue-router方法： 参考链接

1.  //path接跳转路径，query接传递参数 可选，target接打开方式
<router-link :to="{path:'/src/index', query:{id:1，name:'vue'}}" target="_blank">
     <p>前往首页p>
 router-link>

2.  //name接跳转路径，params/query接传递参数 可选
//query在地址栏显示参数内容，params不显示
this.$router.push({path: "/detail", query: {id: hello , psw: world }})
this.$router.push({name: "/detail", params: {id: hello , psw: world }})

3.   //区别：push有记录一个history，replace没有
this.$router.replace({name: '/detail', params: {id: hello , psw: world }})

4.    //router.go(n)：指定前进/回退的步数。
//n 为正数的时候是前进；负数的时候是后退；0的时候是刷新当前页面。
this.$router.go(1)       

5.  //相当于this.$router.go(1)       
this.$router.forward()         //前进一步

6.   //使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。
     //得到href就可以使用window.open开新窗口
const new = this.$router.resolve({name: '/detail', params: {id: hello , psw: world }})
window.open(new.href,'_blank')

返回上一页

js方法 参考链接

//返回一层 -1 ，返回两层 -2
window.history.go(-1);      //返回上一页

window.history.back();      //返回上一页

window.location.go(-1);     //返回上一页并刷新

window.history.back();     //返回上一页并强行刷新
location.reload();              

vue方法： 参考链接

//注释同上
this.$router.go(-1)       

this.$router.back()      //返回上一页