vue路由的底层实现原理是什么？
回答·15
最热
最新
- 如果是hash路由，则调用的是原生的js方法window.hash来处理，并且监听路由的变化，实现一个栈型结构，对路由的跳转和回退进行弹出和压栈，如果是h5路由的api则调用h5的history来处理路由，同样也是栈型结构处理路由的跳转和回退，并且h5自己还封装了许多方法，vue对h5和hash路由进行封装，并且加入了自己的api封装了一套更完整的路由系统插件，不仅仅可以使用hash路由，也可以使用h5路由方法，还可以调用vue自己的路由守卫进行处理逻辑
- 第一种是通过检测 hash 事件，通过 hash 值的改变，来改变页面样式，并且页面不会变化， 第二种是 history 历史模式，利用 history.pushState 来完成页面跳转并且不刷新页面，要注意的是 history 模式前进和后退则会造成页面刷新，所以需要监测 popstate 前进后退事件，当历史记录条目更改时进行相应操作
- 其实就是发布订阅者模式
- 核心有两个类 1.path 类，管理路由表、路由栈及当前路由信息。路由信息包括路由名称和组件。 2.router 类，监听 load 事件以及 hash 或者 pathname 的变化。根据路由名称，从路由表中找到对应组件，并将组件渲染到 router-view 中。
- 我只知道 hash 路由，利用的其实就是锚点，通过 hashchange 事件来监听地址栏 hash 的变化来显示不同的 HTML 代码从而达到页面的局部更新。
- vueRouter 最根本还是依赖 h5 的 api 实现路由记录的控制。 hash 模式还是 history 模式根据 router 初始化时选择的 mode 来决定 通过 mixin 全局混入在 beforeCreate 钩子中将 router 加入 vue 实例中 通过 vue 的响应式原理监听 currentRouter 的变化来通知 routerview 更新页面
- hash 方式 监听 hashchange 事件 history 方式 监听 popstate 事件
- Vue的路由实现：hash模式 和 history模式 hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取； 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。 history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
- 不能说 vue 路由原理吧，spa 的核心原理都是 history 和 hash，history 用的是 window.history 用 popState 监听对应的路径切换动作，hash 用 hashchange。
- 核心有两个类 1.path 类，管理路由表、路由栈及当前路由信息。路由信息包括路由名称和组件。 2.router 类，监听 load 事件以及 hash 或者 pathname 的变化。根据路由名称，从路由表中找到对应组件，并将组件渲染到 router-view 中。