vue-router的简易实现基础知识教程_路由攻略教程

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的vue-router。路由先来看下路由的工作流程后端路由输入url请求发送到服务器,服务器解析请求的路径拿到相应数据-返回给前端前端路由输入urljs解析地址,找到对应地址的页面执行页面生成的js和css渲染页面了解了路由的工作流程之后,再来看下vue-r

vue-router的简易实现基础知识教程

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的vue-router。

vue-router的简易实现基础知识教程_路由攻略教程

路由

先来看下路由的工作流程

后端路由

  1. 输入url
  2. 请求发送到服务器,服务器解析请求的路径
  3. 拿到相应数据-返回给前端

前端路由

  1. 输入url
  2. js解析地址,找到对应地址的页面
  3. 执行页面生成的js和css
  4. 渲染页面

了解了路由的工作流程之后,再来看下vue-router工作流程。

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

url改变,这就涉及了两种模式,hash和history。
hash的特点

  • #后的就是hash的内容,只会给浏览器,不会给服务器
  • 可以通过location.hash获取
  • 可以通过onhashchange监听hash的改变

history的特点

  • history即正常的路径
  • 可以通过location.pathname获取
  • 可以通过onpopstate见监听history变化

看下router.js中的内容,实例化的时候会传mode和routers等其他参数

import hello from './hello.vue';
new Router({
    mode:'history',
    routers:[{
      path:'/',
      name: 'hello',
      component: hello
    }]
})

vue插件

看下vue插件的用法
1.插件都是用过Vue.use方法注册的,下面来看下一段代码。

// 声明一个普通的对象test
var test = {
    b: 1
}
// 写了一个定时器,2秒后改变了test的b属性的值
setTimeout(function(){
    test.b = 111;
},2000)
// 声明了一个函数a
function a(){
    console.log(1)
}
// 给a赋了一个install属性方法
a.install = function(vue){
    // 对test对象的b属性进行双向绑定
    vue.util.defineReactive(test,'b')
    // 全局混入
    vue.mixin({
      beforeCreate(){
         this.test = test;
      }
    })
}
// 注册插件a
Vue.use(a);

<div>{{test.b}}</div>

运行这段代码,结果是会在页面上显示1,过了2秒会变成111,从这个demo中我们可以看出插件是可以将外面定义的变量实现双向绑定的。

实现

接下来实现了一个简易的路由,看下代码

class HistoryRoute{
    constructor(){
      this.current = null;
    }
}

class vueRouter({
    constructor(opt){
       // 路由模式
       this.mode = opt.mode || 'hash';
       // 路由配置项
       this.routes = opt.routes || [];
       this.history = new HistoryRoute;
       // 将路由配置项由数组形式转成键值对
       this.routesMap = this.createMap(this.routes);
       // 初始化,获取、监听路由
       this.init()
    }
    init(){
       if(this.mode === 'hash'){
         location.hash ? "" : location.hash="/";
         window.addEventListener('load',()=>{
            this.history.current = location.hash.splice(1);
         });
         window.addEventListener('hashchange',()=>{
             this.history.current = location.hash.splice(1)
         })
       }else {
         location.pathname ? "" : location.pathname="/";
         window.addEventListener('load',()=>{
            this.history.current = location.pathname;
         });
         window.addEventListener('popstate',()=>{
             this.history.current = location.pathname
         })
       }
    }
    createMap(routes){
      return routes.reduce((memo,current)=>{
        memo[current.path] = current.component;
        return memo;
      },{})
    }
})
vueRouter.install = vue=>{
    vue.mixin({
      beforeCreate(){
        if(this.$options && this.$options.router){
          this._root = this;
          this._router = this.$options.router;
        }
        // 对current变量进行双向绑定
        vue.util.defineReactive(this,'current', this._router.history)
      }else{
        //嵌套路由
        this._root = this.$parent._root;
      }
      // 定义this.$router的get方法,防止修改属性
      Object.defineProperty(this,'$router',{
         get(){
           return this._root._router;
         }
      })
    })
    // 注册一个router-view的组件,渲染路由组件
    vue.component('router-view',{
      render(h){
        let current = this._self._root._router.history.current;
        let routesMap = this._self._root._router.routesMap;
        return h(routesMap(current));
      }
    })
}
export default vueRouter;
海计划公众号
(0)
上一篇 2020/03/20 22:20
下一篇 2020/03/20 22:20

您可能感兴趣的内容

  • MolView小白教程_在线化学分子编辑器

    MolView小白教程 官方网址:http://molview.org/ 简介描述:在线化学分子编辑器 MolView是一款免费开源的化学分子式编辑、查看、绘制工具,其中包含了化合…

    2020/03/10
  • Velocity.js菜鸟知识_一个简单易用、高性能、功能丰富的轻量级JS动画库

    Velocity.js零基础入门 官方网址:http://VelocityJS.org GitHub:https://github.com/julianshapiro/veloci…

    2020/03/06
  • DDOS攻击常见的类型入门攻略_攻击使用攻略

    “互联网”指的是全球性的信息系统,是能够相互交流,相互沟通,相互参与的互动平台。随着互联网的飞速发展,越来越多的网站应运而生,但各种问题也随之而来。其中最严重的莫过于网络安全问题,应该象每家每户的防火防盗问题一样,做到防范于未然。甚至不会想到你自己也会成为目标的时候,威胁就已经出现了,一旦发生,常常措手不及,造成极大的损失。而导致这个问题的最主要的因素就是以

    2020/03/29
  • 基于Vue-SSR优化方案归纳总结菜鸟教程网_SSR攻略教程

    Vue-SSR相信大家都不陌生,与传统 SPA 相比,服务器端渲染 (SSR) 能够具备更好的SEO,方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,除此之外,SSR能够在更短的时间内渲染出页面内容,通过在服务端填充数据吐出到客户端的方式,让用户有更好的用户体验。前言基于VueSSR的页面优化常有,而针对VueSSR的再优化不常有。前段时间有幸作为宇宙无

    2020/03/23
  • VuePress教程视频_一款Vue 驱动的静态网站生成器

    VuePress教程视频 官方网址:https://vuepress.vuejs.org/ GitHub:https://github.com/vuejs/vuepress 简介描…

    2020/03/06
  • 为什么 [‘1’, ‘7’, ‘11’].map(parseInt) 的结果是 [1, NaN, 3]?菜鸟指南_map小白基础

    Javascript 总是以超自然的方式执行我们的代码,这是一件很神奇的事情,如果不信的话,思考一下 [‘1’, ‘7’, ’11’].map(parseInt) 的结果是什么?你以为会是 [1, 7, 11] 吗?我都这么问了,那肯定不是:[‘1’, ‘7’, ’11’].map(parseInt)
    // 输出:(3) [1, NaN, 3]要理解为什么为

    2020/03/26
  • I Remember入门教程_通过互联网向人们分享自己的回忆

    I Remember入门教程 官方网址:http://i-remember.fr/ 简介描述:通过互联网向人们分享自己的回忆 这款网站设计的真的很美,该网站是通过互联网向人们分享自…

    2020/03/08
  • js中require和import的区别菜鸟教程网_区别指南教程

    js中require和import的区别菜鸟教程网 当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化…

    2020/03/19
  • 将本地启动一个HTTP服务器,映射到外网环境使用指南_服务器新手入门

    将本有时候,我们想要测试一下打包好的项目,但是直接点开index.html文件不管用,因为依赖的路径不正确,这时候就需要启动一个HTTP服务来打开项目。我们可以使用 http-server 或者 web server for chrome 来解决这个问题。
    有时候,我们还想要外网也能访问我们本地的服务,这时候我们可以使用 ngrok 来解决这个问题。一、如何

    2020/04/05
  • 揭秘《幸运飞艇走势技巧规律》计划公式与个人实战分享入门基础教程_广告入门指南

    想了解更多知识加飛虎团队免费咨询:1298483136或者vx:a1298483136一般新手大家开头来到飞艇这个游戏里来,最先做的就是要好好掌握一些必要的飞艇的小技巧,这样的做法是让大家可以更合理的去把握时机,目前为止除了某些大神外还基本上没听说过有几个玩家能依靠自己的感觉和运气在不断的赢下去,所以掌握这些小技巧对于新手大家来说,是非常必要的,也是磨练概率

    2020/03/29
  • 你可能知道事务的四大特性,但是你不一定知道事务的实现原理小白知识_事务小白指南

    说到数据库,那就一定会聊到事务,事务也是面试中常问的问题,我们先来一个面试场景:面试官:”事务的四大特性是什么?”我:”ACID,即原子性(Atomicity)、隔离性(Isolation)、持久性(Durability)、一致性(Consistency)!”面试官:”在 MySQL 数据库的 InnoDB 引擎是怎么实现这四大特性的?”我:”这个…这个

    2020/03/22
  • Js从callbacks到sync/await小白入门_sync小白指南

    最近在读一本《基于浏览器的深度学习》,书比较薄,但是涉及的内容很多,因此在读的过程中不得不再查阅一些资料,以加深理解。我目前从事的本职工作就是浏览器研发,对于前端技术并不陌生。但是从前段时间开发微信小程序 识狗君 的过程来看,对JavaScript还是掌握得太少,特别是对一些前端框架以及一些比较新的JavaScript语法和编程模型,了解的不够。在修改tfj

    2020/03/22
  • 12 个评估 JS 库你需要关心的事菜鸟教程网_库小白知识

    1 引言作者给出了从 12 个角度全面分析 JS 库的可用性,分别是:特性。稳定性。性能。包生态。社区。学习曲线。文档。工具。发展历史。团队。兼容性。趋势。下面总结一下作者的观点。2 概述 & 精读特性当你调研一个 JS 库,功能当然是最重要的,就好比 React 的用于开发 UI 界面非常方便,这是流行起来的一部分因素。但同时 React 解决的问题很聚焦

    2020/04/03
  • Dart 异步新手入门_dart基础教程

    Dart是基于 事件循环机制 的 单线程模型一条执行线上,同时且只能执行一个任务(事件),其他任务都必须在后面排队等待被执行。也就是说,在一条执行线上,为了不阻碍代码的执行,每遇到的耗时任务都会被挂起放入任务队列,待执行结束后再按放入顺序依次执行队列上的任务,从而达到异步效果。单线程模型按照代码编写的顺序,自上而下运行,这是我们所认知的,但是当遇到耗时操作(

    2020/03/21
  • angularjs如何获取url参数?小白知识_url零基础入门

    angularjs如何获取url参数?小白知识 Angular中通过$location获取URL参数。$location服务负责解析浏览器地址栏中的URL(基于window.loc…

    2020/03/19
  • node中间层可以干什么?入门基础_中间层基础教程

    node最大的改良架构就是‘增加了中间层’,前后端分离,使用node来做‘BBF(backend of frontend)’在传统后端加入了node这一层,通过此有两点好处,前端接管了view层,后端渲染也开始全部由前端掌控,另一个就是接口层增加了一层。在前后端分离的天然选择下,node中间层可以承担更多的责任。node中间层可以做以下这些方面的工作:代理:

    2020/03/20