2021-04-16 13:39发布
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的
一、main.js里面配置vuex
//引用vuex
import Vuex from 'vuex'
Vue.use(Vuex)
二、main.js里面vuex状态管理
var store = new Vuex.Store({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state => state.recruitScrollY
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
state.recruitScrollY = recruitScrollY
}
actions: {
modules: {}
})
三、这里列举一个listview页面和详情页面,listview页面就是原始页面,listview页面跳转到详情页面,然后返回时候回到跳转到详情页面之前的位置,在listview页面编写代码
beforeRouteLeave(to, from, next) {
let position = window.scrollY //记录离开页面的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来
next()
watch: {
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面,或者原始页面
let recruitScrollY = this.$store.state.recruitScrollY
window.scroll(0, recruitScrollY)
四、若要避免created生命周期的执行,可以使用缓存keepAlive,这里也分享一下
(1)App.vue template
(2)router index.js
Vue.use(Router)
const routerApp = new Router({
routes: [{
{
path: '/NewRecruit',
name: 'NewRecruit',
component: NewRecruit,
meta: {
keepAlive: true
path: '/NewRecruitDesc/:id',
name: 'NewRecruitDesc',
component: NewRecruitDesc,
path: '/SubmitSucess',
name: 'SubmitSucess',
component: SubmitSucess,
keepAlive: false
]
export default routerApp
没想过这个问题觉得可以设置锚点action传值 在jsp判断 如果匹配 自动跳转到这个jsp的锚点位置[removed]location.href="你的页面.htm#你的位置";[removed]如果不匹配 就还是在顶部不知可行不可行
项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:(1).在App.vue中加入:
(2).index.js页面
export default new Router({ routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: true } },
这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试,发现没用,解决手机上实现目的的方法:
//在页面离开时记录滚动位置beforeRouteLeave (to, from, next) { this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop next() },//进入该页面时,用之前保存的滚动位置赋值beforeRouteEnter (to, from, next) { next(vm => { document.body.scrollTop = vm.scrollTop }) },
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave
beforeRouteEnter(to, from, next) {
next(vm => {
// 回到原来的位置
const position = JSON.parse(window.sessionStorage.getItem('position'))
document.querySelector('.list-row').scrollTop = position
// 保存离开页面时的位置
const position = document.querySelector('.list-row').scrollTop
window.sessionStorage.setItem('position', JSON.stringify(position))
因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:(1).在App.vue中加入:
OK!实现!!
<
keep-alive
v-if
=
"$route.meta.keepAlive"
>
router-view
"!$route.meta.keepAlive"
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的,前端不会Vue根本就没必要再聊下去了
这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容: [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...
Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...
最多设置5个标签!
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的
一、main.js里面配置vuex
//引用vuex
import Vuex from 'vuex'
Vue.use(Vuex)
二、main.js里面vuex状态管理
var store = new Vuex.Store({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state => state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
state.recruitScrollY = recruitScrollY
}
},
actions: {
},
modules: {}
})
三、这里列举一个listview页面和详情页面,listview页面就是原始页面,listview页面跳转到详情页面,然后返回时候回到跳转到详情页面之前的位置,在listview页面编写代码
beforeRouteLeave(to, from, next) {
let position = window.scrollY //记录离开页面的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来
next()
},
watch: {
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面,或者原始页面
let recruitScrollY = this.$store.state.recruitScrollY
window.scroll(0, recruitScrollY)
}
}
}
四、若要避免created生命周期的执行,可以使用缓存keepAlive,这里也分享一下
(1)App.vue template
(2)router index.js
Vue.use(Router)
const routerApp = new Router({
routes: [{
{
path: '/NewRecruit',
name: 'NewRecruit',
component: NewRecruit,
meta: {
keepAlive: true
}
},
{
path: '/NewRecruitDesc/:id',
name: 'NewRecruitDesc',
component: NewRecruitDesc,
meta: {
keepAlive: true
}
},
{
path: '/SubmitSucess',
name: 'SubmitSucess',
component: SubmitSucess,
meta: {
keepAlive: false
}
}
]
})
export default routerApp
没想过这个问题
觉得可以设置锚点
action传值 在jsp判断 如果匹配 自动跳转到这个jsp的锚点位置
[removed]
location.href="你的页面.htm#你的位置";
[removed]
如果不匹配 就还是在顶部
不知可行不可行
一、main.js里面配置vuex
//引用vuex
import Vuex from 'vuex'
Vue.use(Vuex)
二、main.js里面vuex状态管理
var store = new Vuex.Store({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state => state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
state.recruitScrollY = recruitScrollY
}
},
actions: {
},
modules: {}
})
三、这里列举一个listview页面和详情页面,listview页面就是原始页面,listview页面跳转到详情页面,然后返回时候回到跳转到详情页面之前的位置,在listview页面编写代码
beforeRouteLeave(to, from, next) {
let position = window.scrollY //记录离开页面的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来
next()
},
watch: {
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面,或者原始页面
let recruitScrollY = this.$store.state.recruitScrollY
window.scroll(0, recruitScrollY)
}
}
}
四、若要避免created生命周期的执行,可以使用缓存keepAlive,这里也分享一下
(1)App.vue template
(2)router index.js
Vue.use(Router)
const routerApp = new Router({
routes: [{
{
path: '/NewRecruit',
name: 'NewRecruit',
component: NewRecruit,
meta: {
keepAlive: true
}
},
{
path: '/NewRecruitDesc/:id',
name: 'NewRecruitDesc',
component: NewRecruitDesc,
meta: {
keepAlive: true
}
},
{
path: '/SubmitSucess',
name: 'SubmitSucess',
component: SubmitSucess,
meta: {
keepAlive: false
}
}
]
})
export default routerApp
项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。
思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:
(1).在App.vue中加入:
(2).index.js页面
这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试,发现没用,
解决手机上实现目的的方法:
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave
beforeRouteEnter(to, from, next) {
next(vm => {
// 回到原来的位置
const position = JSON.parse(window.sessionStorage.getItem('position'))
document.querySelector('.list-row').scrollTop = position
})
},
beforeRouteLeave(to, from, next) {
// 保存离开页面时的位置
const position = document.querySelector('.list-row').scrollTop
window.sessionStorage.setItem('position', JSON.stringify(position))
next()
}
因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:
(1).在App.vue中加入:
(2).index.js页面
这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试,发现没用,
解决手机上实现目的的方法:
OK!实现!!
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的
一、main.js里面配置vuex
//引用vuex
import Vuex from 'vuex'
Vue.use(Vuex)
二、main.js里面vuex状态管理
var store = new Vuex.Store({
state: {
recruitScrollY:0
},
getters: {
recruitScrollY:state => state.recruitScrollY
},
mutations: {
changeRecruitScrollY(state,recruitScrollY) {
state.recruitScrollY = recruitScrollY
}
},
actions: {
},
modules: {}
})
三、这里列举一个listview页面和详情页面,listview页面就是原始页面,listview页面跳转到详情页面,然后返回时候回到跳转到详情页面之前的位置,在listview页面编写代码
beforeRouteLeave(to, from, next) {
let position = window.scrollY //记录离开页面的位置
if (position == null) position = 0
this.$store.commit('changeRecruitScrollY', position) //离开路由时把位置存起来
next()
},
watch: {
'$route' (to, from) {
if (to.name === 'NewRecruit') {//跳转的的页面的名称是"NewRecruit",这里就相当于我们listview页面,或者原始页面
let recruitScrollY = this.$store.state.recruitScrollY
window.scroll(0, recruitScrollY)
}
}
}
四、若要避免created生命周期的执行,可以使用缓存keepAlive,这里也分享一下
(1)App.vue template
<
keep-alive
v-if
=
"$route.meta.keepAlive"
>
<
router-view
>
router-view
>
keep-alive
>
<
router-view
v-if
=
"!$route.meta.keepAlive"
>
router-view
>
(2)router index.js
Vue.use(Router)
const routerApp = new Router({
routes: [{
{
path: '/NewRecruit',
name: 'NewRecruit',
component: NewRecruit,
meta: {
keepAlive: true
}
},
{
path: '/NewRecruitDesc/:id',
name: 'NewRecruitDesc',
component: NewRecruitDesc,
meta: {
keepAlive: true
}
},
{
path: '/SubmitSucess',
name: 'SubmitSucess',
component: SubmitSucess,
meta: {
keepAlive: false
}
}
]
})
export default routerApp
相关问题推荐
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的,前端不会Vue根本就没必要再聊下去了
这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容: [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...
Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...