vue-router 实现原理

一、vue-router是什么

　　通过改变URL,在不重新请求页面的情况下，更新页面视图

二、vue-router三种模式

　　更新视图但不请求页面，是前端路由原理的核心之一。

• Vue-router 模式：　　
  • 1.hash 模式（默认）
  • 2.history 模式
  • 3.abstract 模式 （vue-route v4 之后 memory模式）
• Vue-router v4 升级之后，mode:'xxx'替换为API的形式
  • mode:'hash' 替换为 createWebHashHistory()
  • mode:'history' 替换为 createWebHistory()
  • mode:'abstract'替换为 createMemoryHistory() 　　　　

在vue2项目中，三种模式根据mode参数来决定选择哪一种,我们设置路由模式代码如下：

const router = new VueRouter({
  //mode: 'hash', //默认
  mode: 'history',
  routes
})

在Vue3项目中，三种模式设置代码如下：

import { createRouter, createWebHistory, createWebHashHistory,createMemoryHistory } from 'vue-router'
const router = createRouter({
   //history: createMemoryHistory(), Memory模式
   //history: createWebHashHistory(), Hash 模式
   history: createWebHistory() , // HTML5 模式
   routes:[]  
})

三、vue-router 中 hash 路由模式实现原理

　　1.hash模式的实现是基于location.hash来实现的。location.hash的值 就是URL 中# 后面的内容作为路径

　　2. 我们可以通过a标签，并设置href属性，当用户点击a标签后，URL的hash值会发生改变；或者通过js对location.hash 进行赋值，改变URL的hash值。

　　2.hash 值的改变，会在浏览器的历史访问记录中增加一个记录。因此我们可以通过浏览器的前进、后退按钮控制hash的改变

　　3.改变hash不会重新加载页面，但会触发hashchange 事件

　　4.监听hashchange事件，在该事件中记录当前的路由地址（loation.hash.slice(1)）

　　5.根据当前的路由地址找到对应的组件进行渲染

四、vue-router 中 history 路由模式实现原理

• 　1.history模式是通过HTML5提供的history.pushState()和 history.replaceState() 这两个API来实现的，这两个API可以在不进行页面刷新的情况下，操作浏览器的历史记录。
  • window.history.pushState(sateObject,title,url)
  • window.history.replcatState(sateObject,title,url)
    • stateObject: 状态对象，主要用户popstate事件。当该事件触发时，该对象会传入回调函数中。如果不需要这个对象，此处可以设置null
    • title: 大多数浏览器不支持或者忽略这个参数，最好用null代替
    • url:  添加记录的URL
• 　2. 浏览器前进或者后退通过 window.onpopostate来监听
• 　3.监听popstate 事件，在该事件中通过location.pathname拿到当前路由地址，通过event.state 拿到push进来的sateObject。并找到对应组件进行渲染

// 监听浏览器前进后退
window.onpopstate = (event) =>{
      console.log(event.state,location.pathname)
}

• 　4.history.pushState()或history.replcaeState不会触发popstate事件，所以需要我们手动触发页面跳转

 五、Memory 模式

• Memory模式在内存中管理路由状态，不依赖于浏览器的URL变化。因此用户在使用过程看不到URL变化
• 适用于Node环境 和SSR
• 使用 createMemoryHistory() 创建的
• 虽然不推荐使用，你人可以在浏览器应用程序中使用此模式，但注意它不会有历史记录，这意味着你无法后退或前进

六、路由两种模式的区别

• hash模式（默认）， 如 http://abc.com/#/user/10
• H5 history 模式，如：http://abc.com/user/10
• history 模式需要服务端的支持，而 hash模式不需要服务端支持，因此无特殊需求可选择前者　　

const router = new VueRouter({
        mode:'history',
        routes:[
        
        ]
})

• Memory 模式,不修改url,路由地址在内存中。浏览器环境不推荐使用

六、路由配置--懒加载或者说是异步加载　

通过 () => import(/*webpackChunkName:'navigator'*/, './../components/Navigator') 方式来实现

import Vue from 'vue'
import Router from 'vue-router'

export default new Router({
     routes:[
           {
                    path:'/',
                   component: ()=> import(/*wepackChunkName: 'navigator'*/  './../components/Navigator')
           }
     ]
})

七、路由配置-- 动态路由

const router = new VueRouter({
        mode:'history',
        routes:[
               {
                       path:'/user/:id', // 动态路径参数，以冒号开头。能命中 `/user/10` `/user/20` 等格式的路由
                       component: User
              }
        ]
})


//组件里可以获取到参数

<div>{{$route.params.id}}</div>