vue-router

安装vue-router
vue add router
项目目录

image.png

核心步骤

1.vue 使用VueRouter, 创建路由表 krouter/index

Vue.use(KVueRouter)
const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home
 },...]
 const router = new KVueRouter({
 mode: 'hash',
 base: process.env.BASE_URL,
 routes
})
export default router

2.根节点挂载router

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

3.app.vue中添加数据视图

  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

link的to属性改变，页面不进行刷新，但是视图进行响应。

Vue-router源码

1.根据浏览器路由进行视图响应，但浏览器不刷新。（SPA）
路由的切换有两种 hash与history，这里实现的时候是监听浏览器的hashchange事件，然后通知router-view进行视图的切换

• 利用vue的响应式原理
• 制造一个响应式数据表示当前URL在，在router-view的render函数中使用它。
  因此要实现一个VueRouter插件，该插件有install方法，并注册两个全局组件。
  router-link 与router-view

// 降低耦合， 做一个引用关系，就不必把vue打包进去
let KVue
// 插件
// 实现 KVueRouter 类
// 实现一个install方法
class KVueRouter{
    constructor (options){
        KVue;
        this.$options = options;
        // 缓存路由关系
        this.routeMap = {};
        this.$options.routes.forEach((route)=>{
            this.routeMap[route.path] = route
        })
        // KVue.util.defineReactive  实现数据响应
        const initial = window.location.hash.slice(1)|| '/'
        KVue.util.defineReactive(this, 'current', initial)
        // this.current = '/'
        window.addEventListener('hashchange', this.onHashChange.bind(this))
        window.addEventListener('load', this.onHashChange.bind(this))
    }
    onHashChange(){
        this.current = window.location.hash.slice(1)
    }
}
// 形参是vue 的构造函数
KVueRouter.install =function (Vue) {
      KVue = Vue
      // 1.挂载$router
      Vue.mixin({
          beforeCreate(){
            // 全局混入，将来在组件实例化的时候才执行
            //此时 router实例就存在了
            // this 指的是组件实例、 
            //只在根实例上挂载 $router
            if(this.$options.router){
                // 挂载
                Vue.prototype.$router = this.$options.router;
            }
          }
      })
      // 2.实现两个全局组件
      Vue.component('router-link', {
          props: {
              to: {
                  type: String,
                  require: true,
                  default: '' 
              },
          },
          render(h){
              // a标签 <a href= to>link   就是$slots.default</a>
            return h(
                'a', 
                {
                    attrs:{
                        href: '#'+this.to
                    }
                },
                this.$slots.default
            )
          }
      })
      Vue.component('router-view', {
          // 获取路由实例
          // 需要获取路由表表 routes
          render(h){
        //    const routes = this.$router.$options.routes;
           const current = this.$router.current;
           const route= this.$router.routeMap[current]
           const comp = route? route.component: null
           return h(comp)
          }
      })
}
export default KVueRouter