总结：

vue-router是vue项目的重要组成部分，用于构建单页应用。单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。路由的本质就是建立url和页面之间的映射关系

router 模式

hash / history

hash模式是vue-router的默认模式。hash指的是url锚点，当锚点发生变化的时候，浏览器只会修改访问历史记录，不会访问服务器重新获取页面。因此可以监听描点值的变化，根据描点值渲染指定dom。

hash监听方法：

window.addEventListener('hashchange', () => {const hash = window.location.hash.substr(1)// 根据hash值渲染不同的dom
})

hash模式下，url可能为以下形式：
http://localhost:8080/index.html#/book?bookid=1

history模式，url会如下面所示：
http://localhost:8080/book/1

history模式
H5的history对象提供了pushState和replaceState两个方法，当调用这两个方法的时候，url会发生变化，浏览器访问历史也会发生变化，但是浏览器不会向后台发送请求。

// 第一个参数：data对象，在监听变化的事件中能够获取到
// 第二个参数：title标题
// 第三个参数：跳转地址
history.pushState({}, "", '/a')

history监听方法：
通过监听popstate事件监听history变化，也就是点击浏览器的前进或者后退功能时触发。

window.addEventListener("popstate", () => {const path = window.location.pathname// 根据path不同可渲染不同的dom
})

once more
总体来讲就是利用hash 或者history 模式修改部分 url，不会向后端发送请求，并且能监听到url变化，根据不同url 映射到不同页面

Vue中实现原理
VueRouter核心是，通过Vue.use注册插件，在插件的install方法中获取用户配置的router对象。当浏览器地址发生变化的时候，根据router对象匹配相应路由，获取组件，并将组件渲染到视图上。

1.url改变
2.触发事件监听
3.改变vue-router中的current变量
4.监视current变量的监视者
5.获取新的组件
6.render

// 存储全局使用的Vue对象
let _Vue = null
class VueRouter {// vue.use要求plugin具备一个install方法static install (Vue) {// 判断插件是否已经安装过if (VueRouter.install.installed) {return}VueRouter.install.installed = true_Vue = Vue// 将main文件中实例化Vue对象时传入的router对象添加到Vue的原型链上。_Vue.mixin({beforeCreate () {if (this.$options.router) {_Vue.prototype.$router = this.$options.router}}})}constructor (options) {this.options = options// 用于快速查找routethis.routeMap = {}this.data = _Vue.observable({current: window.location.hash.substr(1)})this.init()}init () {this.createRouteMap()this.initComponents(_Vue)this.initEvent()}createRouteMap () {// 遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中this.options.routes.forEach(route => {this.routeMap[route.path] = route.component})}initComponents (Vue) {// 注册router-link组件Vue.component('router-link', {props: {to: String},methods: {clickHandler (e) {// 修改hashlocation.hash = this.to// 修改current，触发视图更新this.$router.data.current = this.toe.preventDefault()}},render (h) {return h('a', {attrs: {href: this.to},on: {click: this.clickHandler}}, [this.$slots.default])}})const that = this// 注册router-view插件Vue.component('router-view', {render (h) {const component = that.routeMap[that.data.current]return h(component)}})}initEvent () {// 在hash发生更改的时候，修改current属性，触发组件更新window.addEventListener('hashchange', () => {this.data.current = window.location.hash.substr(1)})}
}export default VueRouter

Vue router原理相关推荐

Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
Vue 学习(十、 Vue Router - 路由插件和 Vue 的插件原理)
文章目录一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...
vue router name命名规范_vue-router使用
vue-router基本用法 vue-router的实现原理: 路由不同的页面也就是加载不同的组件. 路由的三个基本概念: router:它是一条路由,test按钮 => test内容,这是一条 ...
已解决vue-router4路由报“[Vue Router warn]: No match found for location with path“
vue-router4动态加载的模式下,当我们在当前页面刷新浏览器时,会出现一个警告 [Vue Router warn]: No match found for location with path ...
Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
vue这些原理你都知道吗？(面试版)
前言在之前面试的时候我自己也经常会遇到一些vue原理的问题, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局！
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
你真的理解 Vue Router 的路由模式吗？
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...
面试考问Vue Router 的路由模式，这个回答令我直接出局~
HR力荐了一个工作 4 年,目前年薪 40W+ 的候选人. 看他简历,从 HTML,CSS,JavaScript ,Vue.js ,再到React 一个都不缺,跨平台PC.移动端.小程序也都接触过,像 ...

Vue router原理

总结：

router 模式

Vue router原理相关推荐

最新文章

热门文章