手写实现vueRouter

1、生命周期

2、动态路由传参

3、嵌套路由

公共部分放在layout组件里面

4、Hash模式合History模式的区别

原理的区别：

• Hash模式是基于锚点，以及onhashchange事件
• History模式是基于HTML5中的History API
  • history.pushState() IE10以后才支持
  • history.replaceState()

如果不设置props：true，就是上面方式获取参数 否则下面方式

5、history模式在node服务器下

因为history模式刷新浏览器会404所以要在服务器配置

6、nginx 环境配置

• 从官网下载 nginx 的压缩包
• 把压缩包解压到 c 盘根目录，c:\nginx-1.18.0 文件夹
• 修改 conf\nginx.conf 文件

location / { 
	root  html;
	index  index.html  index.htm;
	#新添加内容 
	#尝试读取$uri(当前请求的路径)，如果读取不到读取$uri/这个文件夹下的首页 
	#如果都获取不到返回根目录中的 
	index.html try_files $uri $uri/ /index.html;
}

history模式
通过history.pushState()方法改变地址栏(只是改变地址栏)，
监听popState(）事件(记录当前地址栏，前进后退按钮，或者 go()、back()事件触发)，然后根据当前地址找到对应组件触发

# 启动 
start nginx 
# 重启 
nginx -s reload 
# 停止 
nginx -s stop

7、Vue的构建版本

• 运行时版：不支持template模板，需要打包的时候提前编译
• 完整版：包含运行时和编译器，体积比运行时大10k左右，程序运行的时候把模板转成render函数

先看一下vueRouter的核心代码，vue.use()这个方法可以传入函数或者对象，如果传入函数vue.use()会直接调用这个函数，如果传入的是对象，vue.use()会调用这个对象里面的install方法，vueRouter是一个类，也就是一个对象，我们过后会实现一个install方法

这个是vueRouter的类图，+号表示对外公布的方法，-号是静态方法。
上代码

实现思路

• 创建 LVueRouter 插件，静态方法 install
  • 判断插件是否已经被加载
  • 当 Vue 加载的时候把传入的 router 对象挂载到 Vue 实例上（注意：只执行一次）
• 创建 LVueRouter 类
  • 初始化，options、routeMap、app(简化操作，创建 Vue 实例作为响应式数据记录当前路径)
  • initRouteMap() 遍历所有路由信息，把组件和路由的映射记录到 routeMap 对象中
  • 注册 popstate 事件，当路由地址发生变化，重新记录当前的路径
  • 创建 router-link 和 router-view 组件
  • 当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件，渲染 router-view

console.dir(Vue)
let _Vue = null
class VueRouter {
    static install(Vue){
        //1 判断当前插件是否被安装
        // installed自己设定的属性
        if(VueRouter.install.installed){
            return;
        }
        VueRouter.install.installed = true
        //2 把Vue的构造函数记录在全局
        _Vue = Vue
        //3 把创建Vue的实例传入的router对象注入到Vue实例
        // _Vue.prototype.$router = this.$options.router
        _Vue.mixin({
            beforeCreate(){
            	// 如果是vue组件就不执行，如果是vue实例就执行，router只存在vue实例上
                if(this.$options.router){
                    _Vue.prototype.$router = this.$options.router
                    
                }
               
            }
        })
    }
    constructor(options){
        this.options = options
        this.routeMap = {}
        // observable 存储响应式数据 数据变 更新视图
        this.data = _Vue.observable({
            current:"/"
        })
        this.init()

    }
    init(){
        this.createRouteMap()
        this.initComponent(_Vue)
        this.initEvent()
    }
    createRouteMap(){
        //遍历所有的路由规则 吧路由规则解析成键值对的形式存储到routeMap中
        this.options.routes.forEach(route => {
            this.routeMap[route.path] = route.component
        });
    }
    initComponent(Vue){
        Vue.component("router-link",{
            props:{
                to:String
            },
            render(h){// h函数 第一个参数 选择器标签，第二个 属性，第三个 标签内容
                return h("a",{
                    attrs:{
                        href:this.to
                    },
                    on:{
                        click:this.clickhander
                    }
                },[this.$slots.default])
            },
            methods:{
                clickhander(e){
                // 不会刷新页面对服务器发起i请求
                	// 第一个参数 传给popState的对象 第二个参数 网页标题  第三个参数超链接跳转到地址
                    history.pushState({},"",this.to)
                    this.$router.data.current=this.to // 响应式的对象，更改数据之后会重新加载网页
                    e.preventDefault()
                }
            }
            /*
             * vue的构建版本
             * 运行时版：不支持template模板，需要打包的时候提前编译。
             * 完整版：包含运行时和编译器，体积比运行时版大10k左右，程序运行时把模板转换成render函数
             * */
            // template:"<a :href='to'><slot></slot></a>"
        })
        const self = this
        //router-view 相当于一个占位符  根据当前路由地址 获取当前路由组件
        Vue.component("router-view",{
        	// h函数可以把组件 转为虚拟dom
            render(h){
                // self.data.current
                const cm=self.routeMap[self.data.current]
                return h(cm)
            }
        })
        
    }
    initEvent(){
        //popstate方法 浏览器前进 后退按钮或者 go() back()方法调用，  重新加载对应组件
        window.addEventListener("popstate",()=>{
            this.data.current = window.location.pathname
        })
    }
}

8、hash模式实现

https://blog.csdn.net/qq_44746132/article/details/107580083

模拟 VueRouter 的 hash 模式的实现，实现思路和 History 模式类似，把 URL 中的 # 后面的内容作为路由的地址，可以通过 hashchange 事件监听路由地址的变化。

let _Vue = null
export default class VueRouter {
    static install(Vue) {
        // 1、判断当前插件是否已经安装
        if (VueRouter.install.installed) {
            return
        }
        VueRouter.install.installed = true
            // 2、把 vue 构造函数记录到全局变量
        _Vue = Vue
            // 3、把创建 vue 实例时候传入的 router 对象注入到 vue 实例上
            // 混入
        _Vue.mixin({
            beforeCreate() {
                if (this.$options.router) {
                    _Vue.prototype.$router = this.$options.router
                    this.$options.router.init()
                }
            }
        })
    }
    constructor(options) {
        this.options = options
        this.routeMap = {}
        this.data = _Vue.observable({
            current: '/'
        })
    }
    init() {
        this.createRouteMap()
        this.initComponents(_Vue)
        this.initEvent()
    }
    createRouteMap() {
        // 遍历所有的路由规则，把路由规则解析成键值对的形式，存储到 routeMap 中
        this.options.routes.forEach(route => {
            this.routeMap[route.path] = route.component
        })
    }
    initComponents(Vue) {
        const self = this
        Vue.component(
            'router-link', {
                props: {
                    to: String
                },
                render(h) {
                    return h('a', {
                        attrs: {
                            href: '#' + this.to
                        },
                        on: {
                            click: this.clickHandler
                        }
                    }, [this.$slots.default])
                },
                methods: {
                    clickHandler(e) {
                        window.location.hash = '#' + this.to
                        this.$router.data.current = this.to
                        e.preventDefault()
                    }
                }
            }
        )

        Vue.component('router-view', {
            render(h) {
                const conmponent = self.routeMap[self.data.current]
                return h(conmponent)
            }
        })
    }

    initEvent() {
        window.addEventListener('load', this.hashChange.bind(this))
        window.addEventListener('hashchange', this.hashChange.bind(this))
    }
    hashChange() {
        if (!window.location.hash) {
            window.location.hash = '#/'
        }
        this.data.current = window.location.hash.substr(1)
    }
}

在模拟 Vue.js 响应式源码的基础上实现 v-html 指令，以及 v-on 指令。

class Vue {
    constructor(options) {
        // 1、通过属性保存选项的数据
        this.$options = options || {}
        this.$data = options.data || {}
        this.$methods = options.methods || {}
        this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
            // 2、把 data 中的成员转换成 getter 和 setter,并注入到 vue 实例中
        this._proxyData(this.$data)
            // 把 methods 中的成员注入到 vue 实例中 
        this._proxyMethods(this.$methods)
            // 3、调用 observer 对象，监听数据的变化
        new Observer(this.$data)
            // 4、调用 compiler 对象，解析指令和插值表达式
        new Compiler(this)
    }
    _proxyData(data) {
        // 遍历 data 中的所有属性
        Object.keys(data).forEach(key => {
            // 把 data 的属性注入到 vue 实例中
            Object.defineProperty(this, key, {
                enumerable: true,
                configurable: true,
                get() {
                    return data[key]
                },
                set(newValue) {
                    if (newValue !== data[key]) {
                        data[key] = newValue
                    }
                }
            })
        })
    }
    _proxyMethods(methods) {
        Object.keys(methods).forEach(key => {
            // 把 methods 的成员注入到 vue 实例中
            this[key] = methods[key]
        })
    }
}
class Compiler {
    constructor(vm) {
            this.el = vm.$el
            this.vm = vm
            this.compile(this.el)
        }
        // 编译模板，处理文本节点和元素节点
    compile(el) {
            let childNodes = el.childNodes
            Array.from(childNodes).forEach(node => {
                if (this.isTextNode(node)) {
                    // 处理文本节点
                    this.compileText(node)
                } else if (this.isElementNode(node)) {
                    // 处理元素节点
                    this.compileElement(node)
                }
                // 判断 node 节点，是否有子节点，如果有子节点，要递归调用 compile
                if (node.childNodes && node.childNodes.length) {
                    this.compile(node)
                }
            })
        }
        // 编译元素节点，处理指令
    compileElement(node) {
            // 遍历所有的属性节点
            Array.from(node.attributes).forEach(attr => {
                // 判断是否是指令
                let attrName = attr.name
                if (this.isDirective(attrName)) {
                    // v-text --> text
                    attrName = attrName.substr(2)
                    let key = attr.value
                    if (attrName.startsWith('on')) {
                        const event = attrName.replace('on:', '') // 获取事件名
                            // 事件更新
                        return this.eventUpdate(node, key, event)
                    }
                    this.update(node, key, attrName)
                }
            })
        }
        // 编译文本节点，处理插值表达式
    compileText(node) {
        let reg = /\{\{(.+?)\}\}/
        let value = node.textContent
        if (reg.test(value)) {
            let key = RegExp.$1.trim()
            node.textContent = value.replace(reg, this.vm[key])
                // 创建 watcher 对象，当数据改变时更新视图
            new Watcher(this.vm, key, (newValue) => {
                node.textContent = newValue
            })
        }

    }
    update(node, key, attrName) {
        let updateFn = this[attrName + 'Updater']
        updateFn && updateFn.call(this, node, this.vm[key], key)
    }
    eventUpdate(node, key, event) {
        this.onUpdater(node, key, event)
    }


    // 处理 v-text 指令
    textUpdater(node, value, key) {
            node.textContent = value
            new Watcher(this.vm, key, (newValue) => {
                node.textContent = newValue
            })
        }
        // 处理 v-html 指令
    htmlUpdater(node, value, key) {
            node.innerHTML = value
            new Watcher(this.vm, key, (newValue) => {
                node.innerHTML = newValue
            })
        }
        // 处理 v-model 指令
    modelUpdater(node, value, key) {
            node.value = value
            new Watcher(this.vm, key, (newValue) => {
                    node.value = newValue
                })
                // 双向绑定
            node.addEventListener('input', () => {
                this.vm[key] = node.value
            })
        }
        // 处理 v-on 指令
    onUpdater(node, key, event) {
        node.addEventListener(event, (e) => this.vm[key](e))
    }



    // 判断元素属性是否是指令
    isDirective(attrName) {
            return attrName.startsWith('v-')
        }
        // 判断节点是否是文本节点
    isTextNode(node) {
            return node.nodeType === 3
        }
        // 判断节点是否是元素节点
    isElementNode(node) {
        return node.nodeType === 1
    }
}