Navigation Guards

Navigation Guards: means that before reaching a route to a component, its runs guard in advance which will redirect to or cancel routing.

Example:

product.js route file
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const vigo = {
template: `<div>
<h2>Hello vigo</h2>
</div>`
}

const navBar = {
template: `<div>
<ul>
<li><router-link v-bind:to="{ path:'list' }">Product all</router-link></li>
</ul>
</div>`
}

const setting = {
template: `
<div>
<navBar />
<router-view />
<router-view name='status' />
<router-view name='detail' />
</div>`,
components:{
navBar
}
}

const status = {
template: `<div> product status </div>`
}

const detail = {
props:['id'],
template: `<div> product detail Id: {{ id }} </div>`
}

const products = {
template:`<div>
<li v-for="product in products" v-bind:key="product.id">
id: {{product.id}}, name: {{product.name}}, status: {{ product.status}}
<br/>
<router-link v-bind:to="{ name: 'detail', params:{id:product.id }}">Product detail</router-link>
</li>
</div>`,
watch:{
'$route' (to, from){
console.log('from:'+ from+ 'to:' + to)
}
},
data () {
return {
products:[
{id:1, name:'motobike', status:'old'},
{id:2, name:'fan', status:'new'},
{id:3, name:'watch', status:'new'},
{id:4, name:'glasses', status:'old'}
]
}
},
}
const routes = [
{ path: '/',
name: 'setting',
component: setting,
children:[
{
path:'products',
name:'products',
alias: 'list',
components:{
default:products,
status:status
}
},
{
path:'detail/:id',
name:'detail',
components:{
detail:detail
},
props: { detail : true }
}
]
},
{
path: '/vigo',
name: 'vigo',
component: vigo,
beforeEnter: (to, from, next) => {
console.log(to.path)
if(to.path === '/vigo') {
next('/')
}
next()
}
}
]

const router = new VueRouter({
mode:'history',
routes // short for `routes: routes`
})
router.beforeEach((to, from, next) => {
if( to.path === '/detail/list') {
next({ path: '/' })
}
next()
})
export { router }

Before entering to attach a route to get a component rendered, below code runs first. this is called Before hooks
router.beforeEach((to, from, next) => {
if( to.path === '/detail/list') {
next({ path: '/' })
}
next()
})
This means if url equal to '/detail/list', i redirect to path: '/'.
Note: any options used in <router-link>'s to props will definitely use in nex({}) such as replace:true, name:'setting' or error instance.

 After hooks

 This such of hooks is running after routing to component done.
router.afterEach((to, from) => {
if( to.path === '/detail/list') {
console.log('seeeeeeeeeeeeeeee')
}
console.log('dddddddddddddddd')
})

Applying guard to specific routea

 below code is how to get it done
{
path: '/vigo',
name: 'vigo',
component: vigo,
beforeEnter: (to, from, next) => {
console.log(to.path)
if(to.path === '/vigo') {
next('/')
}
next()
}
}

In-Component Guards
this means inside your component vue, you can redirect or cancel routes.

const vigo = {
props: ['p'],
template: `<div>
<h2>Hello vigo: {{ p }}</h2>
</div>`,
beforeRouteEnter(to, from, next){
// called before the route that renders this component is confirmed.
// does NOT have access to `this` component instance,
// because it has not been created yet when this guard is called!
console.log(to.params.p)
next( vm => {
console.log(vm)
})
},
beforeRouteUpdate( to , from , next ) {
// called when the route that renders this component has changed,
// but this component is reused in the new route.
// For example, for a route with dynamic params `/foo/:id`, when we
// navigate between `/foo/1` and `/foo/2`, the same `Foo` component instance
// will be reused, and this hook will be called when that happens.
// has access to `this` component instance.
this.name = to.params.name
next()
},
beforeRouteLeave( to , from, next ) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
console.log(this)
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
}

Comments

Post a Comment

Popular posts from this blog

Vuex mapMutations

Image
VueX mapMutations: is used simply to replace this.$store.commit('abc') to   mapMutations(['abc','..']) . its functionalities are the same but mapMutations is more preferable and useful as it is able to combine different functions in mutations into one. Example: App.vue < template > < div id = "app" > < Counter /> </ div > </ template > < script > import { store , Counter } from './state/simple' export default { name: 'app' , store , components: { Counter }, data () { return { placeHolder: 'Focus on me' } }, } </ script > simple.js import Vue from 'vue' ; import Vuex , { mapGetters , mapMutations } from 'vuex' ; Vue . use ( Vuex ) const store = new Vuex . Store ({ state: { products: [ { id: 1 , name: 'pizza' , price: 10 }, ...
Read more

VueX Actions

Image
VueX Actions: can be used interchangeably with mutations however, actions  be used to commit mutations asynchronously whereas mutations can only be synchronous. Vuex Actions accepts context object as argument for each handler functions and this context contains commit, state, getters, and dispatch as it store instance. In order to call handler functions inside Actions properties from vue component, we use this.$store.dispatch('deductPrice').  When it dispatches from vue component, actions handler function will call mutations handler function with payload injected. Example: simple.js import Vue from 'vue' ; import Vuex , { mapGetters , mapMutations } from 'vuex' ; Vue . use ( Vuex ) const store = new Vuex . Store ({ state: { products: [ { id: 1 , name: 'pizza' , price: 10 }, { id: 2 , name: 'fan' , price: 20 }, { id: 3 , name: 'headset' , price: 30 }, { id: 4 , name: 'phone' , price: ...
Read more

VueX Modules

Image
VueX Modules: is important for large scale project as it make developer more easier to separate store state as module for example moduleOne and moduleTwo. Each module has its own state, getters, actions, mutations and namespace . However, namespace is optional. Nevertheless, it is best practice to have it to prevent some conflicts among modules state, actions, getters, mutations. Example: I have two modules with namespace inside. moduleOne const moduleOne = { namespaced: true , state: { products: [ { id: 1 , name: 'pizza' , price: 10 }, { id: 2 , name: 'fan' , price: 20 }, { id: 3 , name: 'headset' , price: 30 }, { id: 4 , name: 'phone' , price: 1004 } ] }, mutations: { deductPrice ( state ) { return state . products . map ( item => item . price -= 1 ) }, multPrice ( state , payload ) { return state . products . map ( item => i...
Read more