vue-router的原理解析

1.vue-router的使用：

//在項目入口文件main.js中，已經下載vue-router之後：
import Vue from "vue"
import Router from "vue-router"
import App from './App.vue'

Vue.use(Router) //Vue.use實際上是執行插件模塊Router的install方法，並把vue實例傳遞給Router插件模塊裏面。

export default New Router({
    base:process.env.BASE_URL,
    routes:[
        {
            path:'/home',
            name:'home',
            component:()=>import('./home.vue'),  //懶加載路由，異步
            beforeEnter(from,to,next){  //進入路由之前，路由守衛
                next()
            },
            beforeleave(to,from,next){  //離開路由之後，路由守衛
                next()
            }
        }
    ]
})

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

2. 自己封裝一個類似vue-router功能的路由：

//1.創建一個ace-router.js文件，用於封裝自己的router
let Vue

class AceRouter{
    static install(_Vue){  //這個_Vue就是Vue.use(AceRouter)時傳遞進來的Vue類
        Vue=_Vue
        Vue.mixin({  //拓展vue實例方法
            beforeCreate(){
                Vue.prototype.$AceRouter='測試自己封裝的router'
            }
        })
    }
}

export default AceRouter


//2. 在main.js入口文件中
//在項目入口文件main.js中，已經下載vue-router之後：
import Vue from "vue"
import AceRouter "ace-router"
import App from './App.vue'

Vue.use(AceRouter ) //Vue.use實際上是執行插件模塊Router的install方法，並把vue類傳遞給Router插件模塊裏面。
export default New AceRouter ()

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


//3.在組件如login.vue中使用ace-router.js的$AceRouter
//<template>
//    <h1>{{$AceRouter}}</h1>
//</template>