zPatronus's blog

Vue Learning Notes

Posted on Edited on
Notes taken while learning Vue

The chosen router link has a class .router-link-exact-active

Docs: Navigation Guards

As the name suggests, the navigation guards provided by Vue router are primarily used to guard navigations either by redirecting it or canceling it.

To put it in other words, navigation guards allows you to know the urls of the jump-out page and the jump-in page.

To get url of the jump-out page, in whateverName.vue, add:

1
2
3
4
5
6
7
8
9
10
11
12
13
export default{
    data(){
        return{
            lastURL:'',
        }
    },
    beforeRouteEnter(to, from, next) {
    next((vw) => {
      console.log(from)
      vw.lastUrl = from.fullPath
    })
  },
}

Back to previous route

1
this.$router.back()

Get Variables

In /store/index.js, add:

1
2
3
4
5
6
7
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        variableName:'this is a global variable',
    }
})

In view:

1
2
3
4
5
6
7
export default{
    computed:{
        anyNameYourLike(){
            return this.$store.state.variableName
        }
    }
}