vue路由跳转到新页面实现置顶
作者：qq_43103581
这篇文章主要介绍了vue路由跳转到新页面实现置顶问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue路由跳转到新页面置顶
当页面较长，有滚动条时，路由跳转的时候，有时会有不能置顶的情况，只需要在router.js中加入以下代码即可（不是唯一，但能解决问题）
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
},
vue路由跳转的几种方式及解释说明
router-link（声明式路由，在页面中调用）
在Vue中，router-link称为声明式路由，常放在页面中，:to绑定为跳转的目标地址，通过点击实现跳转，路由的跳转主要有两种形式，一种是通过name，另一种是path。
1.1 路由不带参数
<router-link :to="{ name: 'word' }">路由name方式跳转首页</router-link>
<router-link :to="{ path: '/word' }">路由path方式跳转首页</router-link>1.2 路由带参数跳转
路由参数的传递主要有两种方式一种是params，另一种是query
主要区别如下：
- 1. params传参的参数不会显示在跳转的URL中，query传参的参数会显示在URL中。
- 2. params所传的参数通过this.$route.params.参数；获取，query所传的参数通过this.$route.query.参数；获取
- 3. 因为params所传递的参数不显示在URl中，所以在路由跳转时推荐params方式进行传参
- 4. 都不能传对象和着数组引用类型数据，只能传字符串类型数据
<router-link :to="{ name: 'home', params: { key: '1', value: '跳转' } }">路由name,params方式跳转首页</router-link>
<router-link :to="{ name: 'home', query: { key: '1', value: '跳转' } }">路由name,query方式跳转首页</router-link>
<router-link :to="{ path: '/home', params: { key: '1', value: '跳转' } }">路由path,params方式跳转首页</router-link>
<router-link :to="{ path: '/home', query: { key: '1', value: '跳转' } }">路由path,query方式跳转首页</router-link>this.$router.push() (在函数里面调用)
2.1不带参数跳转
this.$router.push({ path: '/home'});
this.$router.push({ name: 'home'});2.2带参数跳转
<a-button type="primary" @click="goTo">路由name方式跳转</a-button>
goTo() {
this.$router.push({ name: 'home', params: { a: '1', b: '2' } });//推荐用params传参方式
this.$router.push({ name: 'home', query: { a: '1', b: '2' } });
} <a-button type="primary" @click="goTo">路由path方式跳转</a-button>
goTo() {
this.$router.push({ path: '/home', params: { a: '1', b: '2' } });//推荐用params传参方式
this.$router.push({ path: '/home', query: { a: '1', b: '2' } });
}this.$router.resolve()打开新窗口跳转
3.1通过path形式跳转
goTo() {
let routeData = this.$router.resolve({
path: '/home',
});
window.open(routeData.href, '_blank');
}3.2通过name形式跳转
goTo() {
let routeData = this.$router.resolve({
name: 'home',
});
window.open(routeData.href, '_blank');
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。