vue-router完整的导航解析流程

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import BAR from './components/bar'
import FOO from './components/foo'
import HOME from './components/home'
import NAME1 from './components/setname1';
import store from './store'

Vue.config.productionTip = false
Vue.use(VueRouter)



const router = new VueRouter({
  routes: [
    {
      path:'/bar',
      components:{default:BAR,name1:NAME1},
      beforeEnter: (to, from, next) => {
        if(confirm('路由独享的守卫')=== true){
          next()
        }
        else{
          next(false)
        } 
      },
      
    },//视图命名可以规定输出位置
    {path:'/foo',component:FOO},
    {path:'*',component:HOME}  
  ]
})


router.beforeEach((to, from, next) => {
  if(confirm('全局前置守卫')=== true){
    next()
  }
  else{
    next(false)
  } 
})

router.beforeResolve((to, from, next) => {
  if(confirm('全局解析守卫')=== true){
    next()
  }
  else{
    next(false)
  } 
})

router.afterEach((to, from) => {
  alert('全局后置钩子') //没卵用的东西不会改变导航本身
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

bar组件代码

<template>
  <div id="bar">
      <span>this is bar</span>
      <span>bar的ID是{{$route.path}}</span>
      <div>{{isData}}</div>
  </div>
</template>

<script>
export default {
  data(){
      return {
          isData:this.$store.state.isData
      }
  },
  beforeRouteEnter:(to, from, next) => {
        if(confirm('路由独享的守卫Enter')=== true){
          next()
        }
        else{
          next(false)
        } 
      },
      beforeRouteUpdate:(to, from, next) => {
        if(confirm('路由独享的守卫Update')=== true){
          next()
        }
        else{
          next(false)
        } 
      },
      beforeRouteLeave:(to, from, next) => {
        if(confirm('路由独享的守卫Leave')=== true){
          next()
        }
        else{
          next(false)
        } 
      },
}
</script>

<style>

</style>

从HOME进入BAR组件的过程