Vue Router源码分析

原创

已于 2022-03-22 21:46:46 修改 · 429 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-06-07 21:12:40 首次发布

本文详细分析Vue Router的源码，涵盖单页应用和前端路由的实现方式，重点讲解Vue Router的基本操作如命名视图、动态路由、嵌套路由和编程式导航。深入探讨History与Hash模式的区别，以及Vue Router如何利用HistoryAPI实现路由。同时，介绍了导航守卫、重定向和别名等高级特性，并解析Vue Router的核心代码，包括install、Constructor、createRouteMap和initEvent等方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue Router

Vue Router 是Vue.js的官方插件，用来快速实现单页应用

单页应用

优点：前后端分离开发，提高开发效率、业务场景切换时，局部更新结构、用户体验好，接近本地应用
缺点：不利用SEO、初次首屏加载速度慢、页面复杂度高

前端路由

URL与内容间的映射关系

实现方式

Hash方式

URL中#后面的内容为路由地址，通过location.url切换浏览器中的地址，只改变#之后内容，浏览器不会请求服务器，将地址记录到访问历史中。hash改变后触发hashchange事件进行网页内容更新。
routes保存url和内容处理函数的对应关系；route定义路由规则方法

var router = {
   
   
        // 保存url和回调函数之间的对应规则
        routes : {
   
   },
        // 定义路由规则方法
        route : function(path,callback){
   
   
            this.routes[path] = callback;
        },
        //初始化路由
        init:function(){
   
   
            that = this;
            //通过监听hash值变化修改执行函数
            window.onhashchange = function(){
   
   
                var hash = location.hash.replace('#','');
                that.routes[hash]  && that.routes[hash]()
            }
        }
    }
    var content = document.getElementById('content');
    //调用函数
    router.route('', function () {
   
   
      content.innerHTML = '这是首页功能';
    });
    router.route('/category',function(){
   
   
        content.innerHTML='这是分类功能';
    });
    router.route('/user',function(){
   
   
        content.innerHTML='这是用户功能';
    });
    //调用初始化方法
    router.init();

History方式

history方式是H5提供的新方式实现前端路由。由于单页应用中不存在/login这样的页面，所以需要服务端配合除静态资源外都返回单页应用的index.html。通过history.pushState()改变浏览器的地址栏并记录到历史中。不发送请求。监听popstate事件可以监听到浏览器地址变化，根据路由地址找到对应组件进行渲染。

history.pushState(参数1，参数2，参数3)方法可以更改url内容但不发生跳转，参数1传递数据，参数2传递标题，参数3是跳转到的地址。
popstate事件监听前进后退的操作，并检测state。需要添加到init方法中。

<script>
	go(path){
     
     
            history.pushState({
     
     path:path},null,path);
            this.routes[path] && this.routes[path]();
        },
        init: function (){
     
     
            var that = this
            window.addEventListener('popstate',function(e){
     
     
                var path = e.state ? e.state.path : '/'
                that.routes[path] && that.routes[path]();
            })
        }
</script>

由于Hash兼容性更好，VueRouter默认执行Hash模式，利用mode选项设置history模式

var router = new VueRouter({
   
   
	mode:'history',
	router:[
	 ...
	 ]
})

区别总结

原理：Hash是基于锚点以及onhashchange事件，地址发生变化触发onhashchange事件。
History模式基于H5中的HistoryAPI中的history.pushState()（支持IE10以后）和history.replaceState()。history.pushState()方法地址变化时向服务器发送请求。