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>