The detailed page returns to the list and retains the original position of the scroll bar

Recently, the school asked to do a project , Slide down in the news list page , Don't open a news , Enter the details page of the news , When finished , Return to the news list page from the details page . And the scroll bar also returns to the top 1 News . This will affect the user experience .

To solve this problem, we need to use route guard

The first step we're going to do is index.js Add

meta

Property is used to cache components , The code is as follows ：

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

If true Explain that this component needs caching

The second step is to create the main entry file App.vue add to

keepAlive

label   The code is as follows ：

<template>
 <div id=&quot;app&quot;>
 <keep-alive>
 <router-view v-if=&quot;$route.meta.keepAlive&quot;></router-view>
 </keep-alive>
 <router-view v-if=&quot;!$route.meta.keepAlive&quot;></router-view>
 </div>
</template>

adopt v-if To judge , Previously configured routing $route.meta.keepAlive Is it true, by true The components will be cached , So we need to add

keepAlive

by true

The third step is to give the news list news.vue Add a routing guard

<template>
 <div id=&quot;news&quot; ref=&quot;listBox&quot;>
 <ul>
 <li v-for=&quot; newa in news&quot; :key=&quot;newa.id&quot;>
 <router-link :to=&quot;'/new/' +newa.id&quot;>{{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>

We need to use

beforeRouteLeave

, and

activated

beforeRouteLeave

The guards ： The route that is about to leave the component is to call , Three parameters ：to Indicates the incoming destination routing object ,from Indicates the routing object that the current navigation is about to leave ,newt It's a function object ,next（）： Enter the next hook in the pipe , If there is no hook, confirm the navigation .

activated

hook ： This component is called after caching , No cache is used , That is to say, it has not been <keep-alive> If the package ,activated It doesn't work ,

Scroll bar is right there, add ref：listBox attribute   Scroll bar used to get changed labels