文档章节

vue-router简易的实现原理

o
 osc_isezqdgg
发布于 2019/09/18 12:04
字数 167
阅读 24
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 class VueRouter {
            constructor(options) {
                this.$options = options;
                this.routeMap = {};
                // 路由响应式
                this.app = new Vue({
                    data: {
                        current: "/"
                    }
                });
            }
            i
            nit() {
                this.bindEvents(); //监听url变化
                this.createRouteMap(this.$options); //解析路由配置
                this.initComponent(); // 实现两个组件
            }
            b
            indEvents() {
                window.addEventListener("load", this.onHashChange.bind(this));
                window.addEventListener("hashchange", this.onHashChange.bind(this));
            }
            o
            nHashChange() {
                this.app.current = window.location.hash.slice(1) || "/";
            }
            c
            reateRouteMap(options) {
                options.routes.forEach(item => {
                    this.routeMap[item.path] = item.component;
                });
            }
            i
            nitComponent() {
                // router-link,router-view
                // <router-link to="">fff</router-link>
                Vue.component("router-link", {
                    props: {
                        to: String
                    },
                    render(h) {
                        // h(tag, data, children)
                        return h("a", {
                            attrs: {
                                href: "#" + this.to
                            }
                        }, [
                            this.$slots.default
                        ]);
                    }
                });
                // <router-view></router-view>
                Vue.component("router-view", {
                    render: h => {
                        const comp = this.routeMap[this.app.current];
                        return h(comp);
                    }
                });
            }
        }
        V
        ueRouter.install = function (Vue) {
            // 混入
            Vue.mixin({
                beforeCreate() {
                    // this是Vue实例
                    if (this.$options.router) {
                        // 仅在根组件执行一次
                        Vue.prototype.$router = this.$options.router;
                        this.$options.router.init();
                    }
                }
            });
        };

以上是简易的实现过程,一下是我整理了一份思路导图

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue前端路由

1、Vue路由,路由的基本概念与原理。 答:1)、路由是一个比较广义和抽象的概念,路由的本质就是对应关系。 2)、在开发中,路由分为,后端路由和前端路由。 3)、后端路由,根据不同的用户U...

别先生
04/24
0
0
2年前端,不懂源码怎么办?

Vue 3.0 beta版的更新,再次成为行业热门话题,几乎所有人都在聊 Vue 源码,说它很重要。但真正掌握了多少,还得经常问问自己。 下面这些题目,你能回答出来几个: 编写高效的 CSS 应该注意什...

若川
06/15
0
0
来一打前端博客压压惊

前言 本文所有内容全部发布再个人博客主页 https://github.com/muwoo/blogs欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最...

osc_wme0cmft
2018/10/15
3
0
来一打前端博客压压惊

前言 本文所有内容全部发布再个人博客主页 github.com/muwoo/blogs 欢迎订阅。不过最近因为事情比较多,有一段时间没有更新了,后面打算继续不断学习更新,欢迎小伙伴一起沟通交流~ 最近更新...

muwoo
2018/10/12
0
0
【笔记】Vue Element+Node.js开发企业通用管理后台系统——Vuex 和 Vue-router 进阶

文章目录 一、Vuex 原理解析 Vuex 的原理关键:使用 Vue 实例管理状态 本实例模仿了vuex的功能: 先打如上几个断点,刷新页面,依次停在如下断点上: 拓展: constructor (options: RouterOp...

onc-virn
04/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阻塞锁,非阻塞锁,自旋锁,互斥锁

1.阻塞锁 多个线程同时调用同一个方法的时候,所有线程都被排队处理了。让线程进入阻塞状态进行等待,当获得相应的信号(唤醒,时间) 时,才可以进入线程的准备就绪状态,准备就绪状态的所有...

osc_umiwij2c
19分钟前
5
0
Asp.NetCore3.1 WebApi中模型验证

前言   不管是前端,还是后端,做数据合法性验证是避免不了的,这边文章就记录一下Asp.NetCore3.1 WebApi中的模型验证; 传统写法--不使用模型验证   来,先上图:   我相信,应该绝大...

osc_qgfjs4a5
20分钟前
21
0
龙芯开源社区上线.NET主页

龙芯团队从2019年7 月份开始着手.NET Core的MIPS64支持研发,经过将近一年的研发,在2020年6月18日完成了里程碑性的工作,在github CoreCLR 仓库:https://github.com/gsvm/coreclr, 随后受...

osc_bj12kvua
21分钟前
11
0
高并发下浏览量入库设计

一、背景 文章浏览量统计,low的做法是:用户每次浏览,前端会发送一个GET请求获取一篇文章详情时,会把这篇文章的浏览量+1,存进数据库里。 1.1 这么做,有几个问题: 在GET请求的业务逻辑里...

osc_uj3h5gt9
22分钟前
27
0
nginx timeout 配置 全局timeout 局部timeout web timeout

nginx比较强大,可以针对单个域名请求做出单个连接超时的配置. 比如些动态解释和静态解释可以根据业务的需求配置 proxy_connect_timeout :后端服务器连接的超时时间_发起握手等候响应超时时间...

osc_5cok9i01
24分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部