vue-router是开发vue项目中必不可少的依赖，为了能更好的理解其实现原理，而源码阅读起来又过于复杂和枯燥，笔者这里实现一个简易版本的vue-rouer，帮助自己来更好的理解源码。
其功能如下：
通过Vue插件形式使用
支持hash模式
支持嵌套路由
router-view组件
router-link组件
路由守卫
基本使用
基础demo单独新建了一个分支 ，方便学习
转载
2021-06-30 17:01:08
145阅读
router一共两个文件，一个是new Vue({(router/index)}) index.js import Vue from "vue"; import VueRouter from "./zhenVue-router"; import Home from "../views/Home.vu ...
转载
2021-10-17 23:28:00
144阅读
2评论
1.创建vuerouter文件夹，在文件夹下面创建index.js
let _Vue = null
export default class VueRouter{
static install(Vue) {
// 1.判断当前插件是否被安装
if(VueRouter.install.installed) {
return
原创
2021-08-12 01:44:07
392阅读
Vue-Router本质 根据"不同的hash值"或者"不同的路径地址", 将不同的内容渲染到router-view中，所以实现VueRouter的核心关键点就在于如何监听'hash'或'路径'的变化, 再将不同的内容写到router-view中。 window.addEventListener(' ...
转载
2021-07-11 22:18:00
185阅读
2评论
前言在这个之前我们需要了解render是什么？可以去之前的文章里面看看废话不多说，快快快 上车！！！定义一个对象先定义一个数据对象来作为我们的数据let data = {
tag:"h2",
props:{},
children:"严老湿"
}tag 作为标签名，props 作为属性对象，children 作为子元素或者文本节点哈哈哈 还是老套路 先写一个 h2 标签试试水
转载
2021-01-30 12:58:59
216阅读
2评论
手写简易版的Promise/*首先我们创建了三个常量用于表示状态，对于经常使用的一些值都应该通过常量来管理，便于开发及后期维护*/
原创
2022-11-17 00:21:33
98阅读
当后端接口没有跨域功能时且无法去修改(比如调用第三方接口)，就需要前端自己实现跨域功能。vue-c
原创
2023-02-20 13:25:16
62阅读
点赞
hash模式 let Vue; export default class VueRouter { constructor(options) { this.$options = options; this.routerMap = {}; this.initRouterMap(); // 定义一个响应式 ...
转载
2021-09-01 17:17:00
106阅读
2评论
VueRouter的核心原理一、VueRouter的核心组成部分主要实现以下几部分：modethis.router/this.router/this.router/this.routerouter-link/router-viewVue.use注册插件1、mode在vueRouter中，主要分为两种模式，一种是hash，一种是history。hash模式是通过监听...
原创
2021-09-02 10:50:29
308阅读
Jest 是流行的前端单元测试框架，可以用它来写 Node 代码或者组件的单测。 Jest 用起来并不难，但很多人用了多年依然不知道它是怎么实现的。 今天我们就一起来写一个简易版 Jest，写完之后你
原创
精选
2024-01-08 10:01:21
239阅读
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 https://router.vuejs.org/zh/ 主要包含的功能 l 嵌套的路由/视图表 l 模块化的、基于组件的路由配置 l 路由参数、查询、通配符 l 基于 Vu ...
转载
2021-09-23 15:13:00
393阅读
2评论
import Vue from 'vue'// import VueRouter from 'vue-router'import VueRouter from '../MYRouter/index.js'Vue.use(VueRouter)// 执行install方法c
原创
2020-07-19 09:02:08
23阅读
vue.extend():用其实现拷贝PS: Object.assign也能实现拷贝，但可能存在兼容性问题vue.util.extend(): 扩展对象
原创
2022-09-13 12:09:03
93阅读
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。推荐使用npm安装。 一、使用路由在main.js中，需要明确安装路由功能： 1.定义组件，这里使用从其他文件import进来 2.定义路由 3.创建 router 实
转载
2017-04-14 19:50:00
401阅读
官网： http://router.vuejs.org/zh-cn/ 1.安装 vue-router 方法一： $ npm install vue-router 方法二： 在 package.json 的 dependencies 中配置版本号 通过 命令行 $ npm install 安装 2.配
转载
2017-03-03 16:42:00
292阅读
2评论
URL的hash URL的hash也就是锚点（#），本质上是改变window.location的href属性 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新 location.href "https://www.baidu.com/" location.hash = ...
转载
2021-09-09 09:59:00
221阅读
2评论
################### npm install vue-router <router-link to="/user" tag="button" active-class="active" exact>Go to User Page</router-link> 这个例子中，当用户点击按
原创
2023-04-17 14:48:53
91阅读
