Vue原理解析：手写路由管理器 —

由于时间问题，暂时先把代码完整的贴上来，感兴趣的朋友可以自行研究或收藏。等我那时有时间的时候，对专栏文章进行排序，并逐一讲解代码

一、对外暴露的入口文件index.js

import Vue from 'vue'
import VueRouter from "./kvue-router";// 使用路由插件 - 插件一定要实现install方法(静态)
Vue.use(VueRouter);// 配置路由参数
const router = new VueRouter({routers: [{path: "/",name: "Home",component: () => import("../views/Home.vue")},{path: "/about",name: "Home",component: () => import("../views/About.vue")}]
});// 暴露路由
export default router;

二、路由处理实例

// 我们自己的路由器
let Vue;
// 1.VueRouter类，是一个插件
class VueRouter {constructor(options) {this.$options = options;// 由于地址的hash值会不断地发生改变，然后展示相应路由上的内容，因此需要不断地触发对应路由组件的渲染函数// 为此，我们将this.current定义为一个响应式数据,并给予一个默认的初始值Vue.util.defineReactive(this, "current", window.location.hash.slice(1) || "/");// 通过hash值的变化，监听URL的变化window.addEventListener("hashchange", () => {this.current = window.location.hash.slice(1);});}
}// 插件要实现instal方法才能被Vue引入
VueRouter.install = function (_Vue) {// 保存构造函数的引用Vue = _Vue;// 挂载$router到Vue原型 - 组件之间的路由导航（全局开放）// 需要注意的是，由于Vue引入路由的时候，router并没有被实例化// 所以我们可以利用全局混入，延迟执行下面代码，这样就可以获取router实例Vue.mixin({beforeCreate() {if (this.$options.router) {Vue.prototype.$router = this.$options.router;}}});// 声明两个全局组件router-link、router-viewVue.component("router-link", {props: {to: {type: String,require: true}},// 不能使用template属性定义字符串模板// 因为当前项目是再Vue-Cli环境下使用Wepacke打包的，所以并没有编译器render(h) {// this指向当前的组件实例return h("a", { attrs: { href: `#${this.to}` } }, this.$slots.default)}});Vue.component("router-view", {render(h) {// this.$router.current表示的是当前的路由地址 // 如果想要触发render函数,那么this.$router.current数值一定得是响应式数值// 如果current的值是响应式的话，我们就可以根据它的值获取路由表中对应组件并且渲染它let component = null;const route = this.$router.$options.routers.find((route) => {return route.path === this.$router.current;});if(route) {component = route.component;}return h(component) }});
}export default VueRouter;

Vue原理解析：手写路由管理器 —— Vue-Router相关推荐

Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式定义动态参数 {path:'/user/:id/:name', ...
24.Vue路由管理器：Router（进阶篇）
导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.其实,导航守卫就是路由跳转过程中的一些钩子函 ...
搜索引擎——反向索引原理揭秘及手写ik分词器
原创不易,转载请标明地址,或者直接附上我的博客首页https://georgedage.blog.csdn.net/ 上篇博客我们说到,数据库为什么不适合搜索引擎的底层存储?,那么什么适合呢? ela ...
vue-router路由管理器的使用
vue-router路由管理器的使用一.vue-router路由入门 1.什么是router(路由)? 这里的路由并不是指我们平时所说的硬件路由器,在vue里是指单页应用的路径管理器,再通俗点来说, ...
vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
【deep_thoughts】30_PyTorch LSTM和LSTMP的原理及其手写复现
文章目录 LSTM API 手写 lstm_forward 函数 LSTMP 修改 lstm_forward 函数视频链接: 30.PyTorch LSTM和LSTMP的原理及其手写复现_哔哩哔哩_ ...
vue+canvas实现手写签字画板
vue+canvas实现手写签字画板效果预览体验地址用途涂鸦画板签名板实现使用canvas,通过监听鼠标动作来进行绘图. 关键代码如下: drawing(event){if(!this ...
Vue 原理解析（五）之虚拟Dom 到真实Dom的转换过程
上一篇 vue 原理解析(四): 虚拟Dom 是怎么生成的再有一颗树形结构的Javascript对象后, 我们需要做的就是讲这棵树跟真实Dom树形成映射关系.我们先回顾之前的mountComponn ...
理解 call、apply、bind 原理，手写简单的 call、apply、bind 方法
理解 call.apply.bind 原理,手写简单的 call.apply.bind 方法 call 原理及实现 MDN定义:call()方法使用给定的 this 值和单独提供的参数调用函数. 用自 ...

Vue原理解析：手写路由管理器 —— Vue-Router

由于时间问题，暂时先把代码完整的贴上来，感兴趣的朋友可以自行研究或收藏。等我那时有时间的时候，对专栏文章进行排序，并逐一讲解代码

一、对外暴露的入口文件index.js

二、路由处理实例

Vue原理解析：手写路由管理器 —— Vue-Router相关推荐

最新文章

热门文章