当前位置:网站首页>The detailed page returns to the list and retains the original position of the scroll bar
The detailed page returns to the list and retains the original position of the scroll bar
2022-07-06 00:37:00 【InfoQ】
meta
import Vue from 'vue'
import VueRouter from 'vue-router'
import News from '../views/News'
import New from '../components/new'
Vue.use(VueRouter)
const routes = [{
path: '/',
component: News,
meta: { keepAlive: true }
}, {
path: '/new/:id',
component: New
}]
keepAlive
keepAlive
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
keepAlive
<template>
<div id="news" ref="listBox">
<ul>
<li v-for=" newa in news" :key="newa.id">
<router-link :to="'/new/' +newa.id">{{newa.title}}</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'news',
data() {
return {
scroll: 0,
news: [
{ id: 1, title: ' Journalism 1', desc: ' Journalism 1' },
{ id: 2, title: ' Journalism 2', desc: ' Journalism 2' },
{ id: 3, title: ' Journalism 3', desc: ' Journalism 3' },
{ id: 4, title: ' Journalism 4', desc: ' Journalism 4' },
{ id: 5, title: ' Journalism 5', desc: ' Journalism 5' },
{ id: 6, title: ' Journalism 6', desc: ' Journalism 6' },
{ id: 7, title: ' Journalism 7', desc: ' Journalism 7' },
{ id: 8, title: ' Journalism 8', desc: ' Journalism 8' },
{ id: 9, title: ' Journalism 9', desc: ' Journalism 9' },
{ id: 10, title: ' Journalism 10', desc: ' Journalism 10' },
{ id: 11, title: ' Journalism 11', desc: ' Journalism 11' },
{ id: 12, title: ' Journalism 12', desc: ' Journalism 12' },
{ id: 13, title: ' Journalism 13', desc: ' Journalism 13' },
{ id: 14, title: ' Journalism 14', desc: ' Journalism 14' },
{ id: 15, title: ' Journalism 15', desc: ' Journalism 15' }
]
}
},
beforeRouteLeave(to, from, next) {
console.log(' Activate beforeRouteLeave route ')
// }
this.scroll = this.$refs.listBox.scrollTop
console.log(this.scroll)
next()
},
activated() {
console.log(' Activate activated Hook function ')
this.$refs.listBox.scrollTop = this.scroll
}
}
</script>
beforeRouteLeave
activated
beforeRouteLeave
activated
边栏推荐
- XML配置文件
- Key structure of ffmpeg - avframe
- Go learning --- structure to map[string]interface{}
- [designmode] Decorator Pattern
- [groovy] JSON serialization (jsonbuilder builder | generates JSON string with root node name | generates JSON string without root node name)
- Idea远程提交spark任务到yarn集群
- 时间戳的拓展及应用实例
- Solve the problem of reading Chinese garbled code in sqlserver connection database
- Codeforces round 804 (Div. 2) [competition record]
- Keepalive component cache does not take effect
猜你喜欢
Date类中日期转成指定字符串出现的问题及解决方法
MYSQL GROUP_ The concat function realizes the content merging of the same ID
MySQL存储引擎
LeetCode 1189. Maximum number of "balloons"
XML Configuration File
关于slmgr命令的那些事
Introduction of motor
FFmpeg抓取RTSP图像进行图像分析
Calculate sha256 value of data or file based on crypto++
MIT博士论文 | 使用神经符号学习的鲁棒可靠智能系统
随机推荐
小程序容器可以发挥的价值
Browser reflow and redraw
Go learning - dependency injection
Ffmpeg captures RTSP images for image analysis
MIT博士论文 | 使用神经符号学习的鲁棒可靠智能系统
Global and Chinese market of digital serial inverter 2022-2028: Research Report on technology, participants, trends, market size and share
Common API classes and exception systems
Free chat robot API
Idea remotely submits spark tasks to the yarn cluster
An understanding of & array names
[groovy] JSON serialization (convert class objects to JSON strings | convert using jsonbuilder | convert using jsonoutput | format JSON strings for output)
Keepalive component cache does not take effect
Leetcode:20220213 week race (less bugs, top 10% 555)
【EI会议分享】2022年第三届智能制造与自动化前沿国际会议(CFIMA 2022)
Comment faire votre propre robot
curlpost-php
Yolov5, pychar, Anaconda environment installation
Spark DF增加一列
Hudi of data Lake (1): introduction to Hudi
Idea远程提交spark任务到yarn集群