综合开发

vue-router的简易实现

微信扫一扫,分享到朋友圈

vue-router的简易实现

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的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;

[dubbo 源码之 ]1. 服务提供方如何发布服务

上一篇

Java 双向链表的增删改查

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

vue-router的简易实现

长按储存图像,分享给朋友