vue-router 实现原理

$route 和 $router 的区别

• $route 表示当前的路由规则数据
• $router 表示当前vuerouter 实例，里面存放着当前路由的一些方法

动态路由组件中如何获取到路由的动态参数呢

第一种： 通过路由开启props 传递参数

• 可以开启 props， 会把 URl 中的参数传递给组件
• 在组件中通过 props 来接受URL 参数

第二种： 通过$route 来获取当前路由参数

const routes = [
    {
        path: '/detail/:id',
        name: 'Detail',
        props: true, // 开启路由传参
        component: () => import('../conponent.vue')
    }
]

<!-- 组件中--> 
<template>
    <!-- 方式一： 通过当前-->
    <div>{{$route.params.id}}</div>
    <!-- 方式二： 路由规则中开启props 穿参 -->
    <div>{{id}}</div>
</template>  
<script>
export default {
    name: 'Detail',
    props: ['id']
}
</script> 

编程式导航

• $router.push()

// 直接传递当前路由规则
this.$router.push('/')
// 第二种 传递当前路由名字
this.$router.push({name: 'Detail'})
// 第三种 传递当前路由名字，并且传递参数
this.$router.push({name: 'Deatail', params:{id: 1}})

• $router.replace()， replace方法不会记录本次历史

this.$router.replace('/detail')

• $router.go()

this.$router.go(-2)

• $router.back()

hash 模式和 history 模式的区别

表现形式的区别

• hash 路由以# 作为分隔 http://test.com/#/detail?id=123
• history 路由没有#号， 就是一个正常的url，但是history 模式需要后端配合

原理的区别

• hash 模式是机遇锚点，以及 onhashchange 事件
• history 模式是基于HTML5中的 HistoryAPI
  • history.pushState()
  • history.replaceState()

history.push 和 history.pushState 的区别

• history.push 当调用该方法时，路径会发生变化，会向服务器发送请求
• history.pushState 不会像服务端发送请求，只会改变当前浏览器地址，并把该记录记录到历史记录里

vuerouter 原理

hash模式 原理

• URL 中#后面的内容作为路径地址
• 监听 hashchange 事件
• 根据当前路由地址找到对应组件进行渲染

history 模式 原理

• 通过history.pushState() 方法改变地址拦
• 吉娜婷 popstate 事件
• 根据当前路由地址找到对应组件重新渲染

vuerouter 模拟实现分析

• 回顾一下vuerouter的基本使用

Vue.use(VueRouter) // 如果传递的是函数的话，vue。use会调用这个函数，如果是对象的话， 会调用该对象的 install 方法
// router/index.js
const router = new VueRouter({ // vuerouter 是个类
    routes: [
        {
            name: 'home',
            path: '/home',
            component: Home
        }
    ]
})

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

• vuerouter 类图

// 类图就是当前 类的结构，就是里面有什么属性和方法
VueRouter
// 类中的属性
+ options // 记录构造函数中传递的对象
+ data // 用于记录当前路由地址， 此处设置一个data的目的是我们需要一个响应式对象，因为路由地址发生变化，组件要对应的更新
+ routeMap // 用于记录路由地址喝组件的对应关系，将来会把路由规则解析道routeMap中
-----------------
// 类中的方法， + 对外公开的方法， _ 是静态方法
+ Constructor(Options): VueRouter // 构造函数用于帮我们初始化上面的属性
_install(Vue) :void // 用于实现vue 的插件机制
+ init(): void // 用于调用下面的方法，把不同的功能抽离到不同的方法当中
+ initEvent(); void // 监听浏览器历史的变化
+ createRouteMap(): void // 用于初始化routeMap 属性
+ initComponents(Vue): void // 用于创建router-link和 router-view 两个组件的