Nuxt Detect Page Enter and Page Leave
July 27, 2021Usually you could use mounted()
and beforeDestory()
to detect nuxt page enter and leave, but it is not reliable if you use nuxt component keep-alive as the page component is cached and not created/destroyed each time.
Alternative would be
<script>
export default {
data() {
item: {},
},
async fetch() {
const id = vm.$route.params.id
// load data
this.item = ...
},
beforeRouteEnter(to, from, next) {
next(vm => {
console.log('beforeRouteEnter', vm.$route, vm.item.name)
})
},
beforeRouteUpdate(to, from, next) {
console.log('beforeRouteUpdate', this.$route, this.item.name)
next()
},
beforeRouteLeave(to, from, next) {
console.log('beforeRouteLeave', this.$route, this.item.name)
next()
}
}
</script>
beforeRouteEnter
: called first time the page is entered (e.g./about
to/page/123
), with the current route info,this.item
is empty as fetch is not called yet.beforeRouteUpdate
: called when the page changed (e.g./page/123
to/page/555
), where the route info is the previous page,this.item
is from previous page.beforeRouteLeave
: called when the page exist (e.g./page/123
to/about
), where the route info is the previous page,this.item
is from previous page.
❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
Tags:
Related entries:
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn