【源码】vue-rotuer1 原理

大纲
hash路由
history路由
vue-router简单实现
vue中的数组，对象添加属性的监听

（1）Hash

• url 的 hash 以 # 开头，原本是用来作为锚点，从而定位到页面的特点区域
• 当 hash 改变时，页面不会刷新，浏览器也不会向服务器发送请求
• 注意：hash 改变时，会触发 hashchange 事件，hashchange回调函数中，可以请求数据，实现页面的更新操作

Hash

1. 作为锚点
  - 点击a2会跳转到div2上，同时url中的hash部分会变化
锚点1
锚点2
锚点1
锚点2


2. 当页面的url的hash改变时，会触发 hashchange 事件，可以事件更新的更新操作

  锚点1
  锚点2
  





3. 手动实现 hash-router

原理：
（1）url的hash改变时，触发hashchange事件
（2）hashchange事件触发时，更新视图

- html部分
  home
  other
  
内容部分

- js部分
const routes = [{ // 路由配置数组
  path: '/home',
  component: '
home页面
'
}, {
  path: '/other',
  component: '
other页面
'
}]

class Router {
  constructor(routes) {
    this.route = {}
    routes.forEach(item => { 
      // 循环配置项，path作为key, value是一个更新html的函数
      this.route[item.path] = () => { document.getElementById('content').innerHTML = item.component }
    })
    this.init()
  }

  init () {
    window.addEventListener('load', this.updateView, false) // 内容加载完成触发
    window.addEventListener('hashchange', this.updateView, false) // hash改变触发，更新视图
  }
  updateView = () => {
    const hash = window.location.hash.slice(1) || '/'   // 截取hash
    this.route[hash] && this.route[hash]() // 如果该路由存在，就加载路由对应的组件
  }
}

const router = new Router(routes)

(2) History

• History对象的属性
  （1）History.length：当前窗口访问过的网址数量，包括当前页面
  （2）History.state：History堆栈最上层的状态值

• History对象的方法：back() forward() go()

• History.pushState(state, title, url) ------- 用于在历史中添加一条记录
  （1）state：一个与添加的记录相关联的 对象，主要用于 popstate 事件。在popstate事件触发时，浏览器会将这个对象序列化后保存在本地，从新载入这个页面时，能拿到这个对象
  （2）title：新页面的标题，现在所有浏览器都忽略这个参数，可以填空字符串
  （3）url：新的网址，必须与当前页面在同一个域内，浏览器的地址栏将显示这个网址
  （4）pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。

• History.replaceState() ------------------- 用来修改 History对象 的当前记录

• popstate 事件 ------- 每当同一个文档的浏览历史出现变化时，就会触发popstate事件
  （1）注意：popstate事件触发的时机：如果仅仅是改变 History.pushState 和 History.replaceState 不会触发 popstate，但是 History.pushState 和 History.replaceState 可以改变url，（不会触发 popstate 但会 修改地址栏的url）
  （2）popstate触发的条件：

  1. 浏览器的进退按钮，
  2. 或者 History.go()，History.back()，History.forward()等

• html5中通过 History.pushState()和 History.replaceState()来进行路由控制，通过这两个方法可以实现改变url，且实现不向服务器发送请求，不存在#号，比hash路由更美观

• 但是 History 路由需要服务器的支持，并且需将所有的路由重定向到根页面

History


前置知识点：
1. history
  - html5中通过 history.pushState 和 hitstory.repalceState 来控制路由
  - history.pushState 和 history.replaceState 只会改变 History对象，会改变url，但不会更新页面
    - 所以当history对象变化时，需要手动触发一个事件
      - 1. 封装一个方法，在 pushState()或者replaceState()之后调用一个方法
      - 2. 通过浏览器history.back() go() forward()等方法触发 popState 事件

2. location对象
  - host 主机名和端口号
  - hostname 主机名
  - pathname 返回url的路径部分，----------------  /之后  ?之前
  - href 返回完整的url -------------------------  a标签中也有href属性
  - search 以 ? 开始至行尾 或 # --------------- ?开始到#号之前，如果没有#就到url结束（包括？号）
  - hash 以 # 开始至行尾 ----------------------- hash部分不会上传到服务器（包括#号）
  - port 端口号
  - protocol 协议 ------------------------------ 包括结尾的：  (http:) 
  - origin 协议域名端口
  



  

    home
    other

    
content
  
  

实现一个简单的 vue-router

  
  
  
  
  
  


  

    

      
      home
      route
    
    
  

  

https://juejin.im/post/5cf9f75ef265da1bbf690ec7

https://juejin.im/post/5cb2c1656fb9a0688360fb2c

基础 https://juejin.im/post/5c7160d46fb9a049d236ae79

hash history 路由 模拟实现 https://juejin.im/post/5b330142e51d4558b10a9cc5

vue-router模拟实现 https://juejin.im/post/5b35dcb5f265da59a117344d

url组成 https://blog.csdn.net/hongtaochi0464/article/details/90649340

数组和对象的监听

https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9