当前位置:网站首页>详细页返回列表保留原来滚动条所在位置
详细页返回列表保留原来滚动条所在位置
2022-07-06 00:33: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: '新闻1', desc: '新闻1' },
{ id: 2, title: '新闻2', desc: '新闻2' },
{ id: 3, title: '新闻3', desc: '新闻3' },
{ id: 4, title: '新闻4', desc: '新闻4' },
{ id: 5, title: '新闻5', desc: '新闻5' },
{ id: 6, title: '新闻6', desc: '新闻6' },
{ id: 7, title: '新闻7', desc: '新闻7' },
{ id: 8, title: '新闻8', desc: '新闻8' },
{ id: 9, title: '新闻9', desc: '新闻9' },
{ id: 10, title: '新闻10', desc: '新闻10' },
{ id: 11, title: '新闻11', desc: '新闻11' },
{ id: 12, title: '新闻12', desc: '新闻12' },
{ id: 13, title: '新闻13', desc: '新闻13' },
{ id: 14, title: '新闻14', desc: '新闻14' },
{ id: 15, title: '新闻15', desc: '新闻15' }
]
}
},
beforeRouteLeave(to, from, next) {
console.log('激活beforeRouteLeave路由')
// }
this.scroll = this.$refs.listBox.scrollTop
console.log(this.scroll)
next()
},
activated() {
console.log('激活activated钩子函数')
this.$refs.listBox.scrollTop = this.scroll
}
}
</script>
beforeRouteLeave
activated
beforeRouteLeave
activated
边栏推荐
- FFmpeg学习——核心模块
- [designmode] adapter pattern
- Huawei equipment configuration ospf-bgp linkage
- Spark DF增加一列
- Knowledge about the memory size occupied by the structure
- [Online gadgets] a collection of online gadgets that will be used in the development process
- How to make your own robot
- Tools to improve work efficiency: the idea of SQL batch generation tools
- MySQL存储引擎
- Room cannot create an SQLite connection to verify the queries
猜你喜欢
Tools to improve work efficiency: the idea of SQL batch generation tools
MySql——CRUD
【DesignMode】装饰者模式(Decorator pattern)
Browser reflow and redraw
MySql——CRUD
How to solve the problems caused by the import process of ecology9.0
Permission problem: source bash_ profile permission denied
Configuring OSPF GR features for Huawei devices
Hudi of data Lake (1): introduction to Hudi
Huawei equipment is configured with OSPF and BFD linkage
随机推荐
[Chongqing Guangdong education] Chongqing Engineering Vocational and Technical College
FFMPEG关键结构体——AVFormatContext
Problems and solutions of converting date into specified string in date class
[QT] QT uses qjson to generate JSON files and save them
[Online gadgets] a collection of online gadgets that will be used in the development process
数据分析思维分析方法和业务知识——分析方法(三)
2022-02-13 work record -- PHP parsing rich text
[EI conference sharing] the Third International Conference on intelligent manufacturing and automation frontier in 2022 (cfima 2022)
MySQL functions
Room cannot create an SQLite connection to verify the queries
NLP generation model 2017: Why are those in transformer
Huawei equipment configuration ospf-bgp linkage
从底层结构开始学习FPGA----FIFO IP核及其关键参数介绍
关于slmgr命令的那些事
[designmode] adapter pattern
AtCoder Beginner Contest 254【VP记录】
Global and Chinese markets of universal milling machines 2022-2028: Research Report on technology, participants, trends, market size and share
Codeforces gr19 D (think more about why the first-hand value range is 100, JLS yyds)
Model analysis of establishment time and holding time
Knowledge about the memory size occupied by the structure