Style Related

Add Style to the Chosen Router Link

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

Vue Router Related

Navigation Guard

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:

export default{
    data(){
        return{
            lastURL:'',
        }
    },
    beforeRouteEnter(to, from, next) {
    next((vw) => {
      console.log(from)
      vw.lastUrl = from.fullPath
    })
  },
}

Back to previous route

this.$router.back()

Vuex Related

Get Variables

In /store/index.js, add:

import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        variableName:'this is a global variable',
    }
})

In view:

export default{
    computed:{
        anyNameYourLike(){
            return this.$store.state.variableName
        }
    }
}