2--仿vue 手写一个Router--主要说hash模式，组件渲染也是只说router-view

最新推荐文章于 2024-07-17 21:31:25 发布

张大晴

最新推荐文章于 2024-07-17 21:31:25 发布

阅读量256

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zhangshab/article/details/103805397

版权

本文深入探讨了如何手动实现Vue Router的Hash模式，特别关注router-view组件的实现。在install.js中注册全局组件后，router-view即可使用。在讲解routerView.js的关键代码时，作者解释了$vnode的概念，并通过示例说明了如localhost:8080/#/a/b/c这样的URL如何工作。此外，提供了代码示例的百度网盘链接。

摘要由CSDN通过智能技术生成

上文说到router-view和router-link。这块就重点说下router-view, router-link就不说了

router-view和router-link都是全局组件，routerView的代码如下

// 这里是router-view的组件
// router-view 用函数式组件写，特点：没有this 没有状态
export default {
    functional: true, // 函数式组件的标志。必须要有这个
    /* 
    data(){  -- 函数式组件没有data这个玩应
        return {}
    }
    */
    render(h,context){  
        //  console.log(this) -- 函数式组件中没有this这玩应...
  
        /*  
            context
            可以理解为router-view的this(和正常的.vue的组件中的this类似)或者理解为就是router-view 
            注意！！！
            为啥要写 let parent = context.parent 呢？
            因为context 不可以像 context.$route 调用vue原型/实例上的属性，只能通过context.parent
            找到router-view 父组件， router-view父组件就是正常的.vue的组件。
            每一个.vue这种组件都是一个vue实例。这个需要特别清楚下，所以这样就可以调用vue原型/实例上的
            属性
        */
        let parent = context.parent;// context.parent 为 router-view的父组件