页面跳转–多种
场景：实现一个页面跳转的时候，要通过改变路由地址来刷新当前页面内容。
参考：各种网络博客
总结：
HTML和Script
-
<a href=''></a> -
window.location.href/replace（在script中可以直接执行）
window.location.href = '${location.origin}/some/where/to/go.html'
// 若跳转，并不让返回
window.location.replace(`${location.origin}/some/where/to/go.html`);
- 通过
ref标注对象，执行定位方法直接定位到指定元素
this.$refs.rules.scrollIntoView();
window.scrollTo方法
window.scrollTo(0, this.$refs.rules.offsetTop);
微信小程序里面跳转
// 会将调用该方法的页面加入堆栈
wx.navigateTo({
url:'/some/where/to/go',
})
// 返回到上一页后，会刷新上一个页面的onShow方法
wx.navigateBack({
delta: 2, // 返回前2页
})
注：想要被刷新的方法放在onshow()中，不想被刷新的放在onload()中；
如果整个页面都要刷新，可以将onLoad()方法在onshow()中进行调用；
其他跳转方式：
// 只能跳转到tabBar的配置页面
wx.switchTab({
url: '/page/index',
});
// 关闭当前页面，跳转指定页面
wx.redirectTo({
url: `/pages/some/where/togo_code=${code}&id=${id}&a=1`,
});
// 关闭所有页面，跳转指定页面
wx.reLaunch({
url: '/page/index',
});
vue路由跳转有四种方式
-
<router-link :to="/home"或者"{name:'home'}"或者"{path:'/home'}"> -
this.$router.push()、this.$router.replace()、this.$router.go(n)区别：
push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面；
replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 ；
go(n) 向前或者向后跳转n个页面，n可为正整数，如1，或负整数，如-1；
注意：带参数的情况
params: {id:1}或者query: {id:1}
<router-link :to="{name:'home', params: {id:1}}">
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
<router-link :to="{name:'home', query: {id:1}}">
// 路由可不配置
// html 取参 $route.params.id
// html 取参 $route.query.id
// script 取参 this.$route.params.id
// script 取参 this.$route.query.id
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.query.id
// script 取参 this.$route.query.id
// html 取参 $route.params.id
// script 取参 this.$route.params.id