vue-router 原理及实现

最新推荐文章于 2024-09-11 17:04:07 发布

置顶 June.1

最新推荐文章于 2024-09-11 17:04:07 发布

阅读量1.5w

点赞数 7

分类专栏： Vue开发文章标签： vue

本文链接：https://blog.csdn.net/qq_39043923/article/details/107063384

版权

Vue开发专栏收录该内容

24 篇文章 10 订阅

订阅专栏

路由模式

hash：默认hash 模式, 使用 URL hash值来作路由
history：依赖 HTML5 History API 和服务器配置
abstract：支持所有 JavaScript 运行环境，如 Node.js 服务器端

ips hash 和 history 中都会记录浏览历史,保存在浏览器的路由栈中

模式分配

/* other... */
if (!inBrowser) { // 非浏览器模式
 	mode = 'abstract'
 }
 this.mode = mode
 // 通过mode 的值来调用不同的实例
 switch (mode) { 
   case 'history':
     this.history = new HTML5History(this, options.base)
     break
   case 'hash':
     this.history = new HashHistory(this, options.base, this.fallback)
     break
   case 'abstract':
     this.history = new AbstractHistory(this, options.base)
     break
   default:
     if (process.env.NODE_ENV !== 'production') {
       assert(false, `invalid mode: ${mode}`)
     }
 }
 /* other... */

hash 模式原理

window.location对象 例如：https://www.baidu.com:443/test#/params
hash ：设置或返回从 (#) 开始的 URL（锚）。#/params
host ：设置或返回主机名和当前 URL 的端口号 www.baidu.com:443。
hostname：设置或返回当前 URL 的主机名www.baidu.com。
href ：设置或返回完整的 URL。https://www.baidu.com:443/test#/params
pathname：设置或返回当前 URL 的路径部分。/test
port：设置或返回当前 URL 的端口号。443
search ：设置或返回从问号 (?) 开始的 URL（查询部分）。
assign() ：加载新的文档。
reload() ：重新加载当前文档。
replace() ：用新的文档替换当前文档。

hash即浏览器url中 #后面的内容
通过 window.location.hash 来获取内容
www.baidu.com/这里是什么内容都是忽略的ssss#内容 详细如图

在这里插入图片描述

通过 hashchange 事件来监听浏览器的 hash值的改变, 渲染响应路由页面

if('onhashchange' in window) { 
	window.addEventListener('hashchange',function(e){
	   console.log(window.location.hash) 
	},false)
}

history 模式原理

history 对象方法

go() :接受一个整数为参数，移动到该整数指定的页面，比如history.go(1)相当于history.forward(),history.go(-1)相当于history.back(),history.go(0)相当于刷新当前页面
back() :移动到上一个访问页面，等同于浏览器的后退键,常见的返回上一页就可以用back()，是从浏览器缓存中加载，而不是重新要求服务器发送新的网页
forward() :移动到下一个访问页面，等同于浏览器的前进键
pushState()：

history.pushstate(state,title,url)
state: 一个与指定网址相关的状态对象，popState事件触发时，该对象会传入回调函数，如果不需要这个对象，此处可填null
title: 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
url: 新的网址，必须与当前页面处在同一个域，浏览器的地址栏将显示这个网址
replaceState(): history.replaceState()方法的参数和pushState()方法一摸一样，区别是它修改浏览器历史当中的记录
length：history.length属性保存着历史记录的url数量，初始时该值为1，如果当前窗口先后访问了三个网址，那么history对象就包括3项，history.length=3
state：返回当前页面的state对象。可以通过replaceState()和pushState()改变state，可以存储很多数据

scrollRestoration
history.scrollRestoration = 'manual'; 关闭浏览器自动滚动行为
history.scrollRestoration = 'auto'; 打开浏览器自动滚动行为(默认)
window.location.href.replace(window.location.origin, '') 获取记录内容

在这里插入图片描述

通过popstate事件来监听history模式, 渲染响应路由页面

popState 事件

每当同一个文档的浏览历史（即history）出现变化时，就会触发popState事件

注意：仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发。另外该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件不会被触发

使用的时候，可以为popState事件指定回调函数

window.onpopstate = function (event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
};
    
// 或者

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

回调函数的参数是一个event事件对象，它的 state 属性指向 pushState 和 replaceState 方法为当前url所提供的状态对象（即这两个方法的第一个参数）。上边代码中的event.state就是通过pushState和replaceState方法为当前url绑定的state对象

这个state也可以直接通过history对象读取 history.state

注意：页面第一次加载的时候，浏览器不会触发popState事件

 window.addEventListener('popstate', e => {
    console.log(window.location.href.replace(window.location.origin, ''));
})

完整的DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生实现hash和browser两种路由模式</title>
</head>
<body>
    <div class="router_box">
        <a href="/home" class="router" replace="true">主页</a>
        <a href="/news" class="router">新闻</a>
        <a href="/team" class="router">团队</a>
        <a href="/about" class="router">关于</a>
        <a href="/abcd" class="router">随便什么</a>
    </div>
    <div id="router-view"></div>
    <script>
        function Router(params){
            // 记录routes配置
            this.routes = params.routes || [];
            // 记录路由模式
            this.mode = params.mode || 'hash';
            console.log('this.mode', this.mode);
            // 初始化
            this.init = function(){
                // 绑定路由响应事件
                var that = this;
                document.querySelectorAll(".router").forEach((item,index)=>{
                    item.addEventListener("click",function(e){
                        // 阻止a标签的默认行为
                        if ( e && e.preventDefault ){
                            e.preventDefault(); 
                        }else{
                            window.event.returnValue = false;  
                        } 
                        
                        if (that.mode == 'hash'){
                            // 判断是replace方法还是push方法
                            if (this.getAttribute("replace")){
                                var i = window.location.href.indexOf('#')
                                // 通过replace方法直接替换url
                                window.location.replace(
                                    window.location.href.slice(0, i >= 0 ? i : 0) + '#' + this.getAttribute("href")
                                )
                            }else{
                                // 通过赋值追加
                                window.location.hash = this.getAttribute("href");
                            }
                        }else{
                            if (this.getAttribute("replace")){
                                window.history.replaceState({}, '', window.location.origin+this.getAttribute("href"))
                                that.routerChange();

                            }else{
                                window.history.pushState({}, '', window.location.origin+this.getAttribute("href"))
                                that.routerChange();
                            }
                        }
                        
                    }, false);
                });
                // 监听路由改变
                if (this.mode == 'hash'){//hash模式时监听hashchange
                    window.addEventListener("hashchange",()=>{
                        this.routerChange();
                    });
                }else{//history模式时监听popstate事件
                    window.addEventListener('popstate', e => {
                        console.log(123);
                        this.routerChange();
                    })
                }
                this.routerChange();
            },
            // 路由改变监听事件
            this.routerChange = function(){
                if (this.mode == 'hash'){
                    let nowHash=window.location.hash;
                    let index=this.routes.findIndex((item,index)=>{
                        return nowHash == ('#'+item.path);
                    });
                    if(index>=0){
                        document.querySelector("#router-view").innerHTML=this.routes[index].component;
                    }else {
                        let defaultIndex=this.routes.findIndex((item,index)=>{
                            return item.path=='*';
                        });
                        if(defaultIndex>=0){
                            const i = window.location.href.indexOf('#')
                            window.location.replace(
                                window.location.href.slice(0, i >= 0 ? i : 0) + '#' + this.routes[defaultIndex].redirect
                            )
                        }
                    }
                }else{
                    let path = window.location.href.replace(window.location.origin, '');
                    let index=this.routes.findIndex((item,index)=>{
                        console.log('path...', path, 'item.path...', item.path);
                        return path == item.path;
                    });
                    if(index>=0){
                        document.querySelector("#router-view").innerHTML=this.routes[index].component;
                    }else {
                        let defaultIndex=this.routes.findIndex((item,index)=>{
                            return item.path=='*';
                        });
                        if(defaultIndex>=0){
                            console.log(window.location.origin+this.routes[defaultIndex].redirect)
                            window.history.pushState({}, '', window.location.origin+this.routes[defaultIndex].redirect)
                            this.routerChange();
                            
                        }
                    }
                }
            }
            // 调用初始化
            this.init();
        }
        new Router({
            mode: 'hash',
            routes:[
                { path: '/home', component: '<h1>主页</h1><h4>新一代前端工程师：我们啥都会</h4>' },
                { path: '/news', component: '<h1>新闻</h1><h4>今天2020-07-01</h4>' },
                { path: '/team', component: '<h1>团队</h1><h4>WEB前端工程师</h4>' },
                { path: '/about', component: '<h1>关于</h1><h4>我们都要加油</h4>' },
                { path:'*', redirect:'/home'}
            ]
        });
    </script>
</body>
</html>

加深理解阅读 route-link 和 route-view

`route-link`

官方API文档

该组件支持用户在具有路由功能的应用中(点击)导航,默认渲染成带有正确链接的<a>标签，可以通过tag属性生成别的标签。

它本质上是通过在生成的标签上绑定了click事件，然后执行对应的VueRouter实例的push()实现的，对于router-link组件来说，可以传入以下props:

to 表示目标路由的链接,当被点击后，内部会立刻把to的值传到router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象
tag router-link组件渲染的标签名，默认为a
exact 布尔类型,“是否激活”默认类名的依据是包含匹配
append 布尔类型,设置append属性后,则在当前(相对)路劲前添加基路径
replace 布尔类型,设置replace后，当点击时会调用router.replace()而不是router.push(),这样导航后不会留下history记录
activeClass 链接激活时使用的CSS类名
exactActiveClass 配置当链接被精确匹配的时候应该激活的 class
event 声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组

var Link = {
  name: 'RouterLink',
  props: {
    to: {
      type: toTypes,
      required: true
    },
    tag: {
      type: String,
      default: 'a'
    },
    exact: Boolean,
    append: Boolean,
    replace: Boolean,
    activeClass: String,
    exactActiveClass: String,
    event: {
      type: eventTypes,
      default: 'click'
    }
  },
  render: function render (h) {
    var this$1 = this;

    var router = this.$router;
    var current = this.$route;
    var ref = router.resolve(this.to, current, this.append);
    var location = ref.location;
    var route = ref.route;
    var href = ref.href;

    var classes = {};
    var globalActiveClass = router.options.linkActiveClass;
    var globalExactActiveClass = router.options.linkExactActiveClass;
    // 支持全局空 Active Class
    var activeClassFallback = globalActiveClass == null
      ? 'router-link-active'
      : globalActiveClass;
    var exactActiveClassFallback = globalExactActiveClass == null
      ? 'router-link-exact-active'
      : globalExactActiveClass;
    var activeClass = this.activeClass == null
      ? activeClassFallback
      : this.activeClass;
    var exactActiveClass = this.exactActiveClass == null
      ? exactActiveClassFallback
      : this.exactActiveClass;
    var compareTarget = location.path
      ? createRoute(null, location, null, router)
      : route;

    classes[exactActiveClass] = isSameRoute(current, compareTarget);
    classes[activeClass] = this.exact
      ? classes[exactActiveClass]
      : isIncludedRoute(current, compareTarget);

    var handler = function (e) {
      if (guardEvent(e)) {
        if (this$1.replace) {
          router.replace(location);
        } else {
          router.push(location);
        }
      }
    };

    var on = { click: guardEvent };
    if (Array.isArray(this.event)) {
      this.event.forEach(function (e) { on[e] = handler; });
    } else {
      on[this.event] = handler;
    }

    var data = {
      class: classes
    };

    if (this.tag === 'a') {
      data.on = on;
      data.attrs = { href: href };
    } else {
      // 找到第一个< a >子级，并应用侦听器和href
      var a = findAnchor(this.$slots.default);
      if (a) {
        // 如果< a >是静态节点
        a.isStatic = false;
        var aData = a.data = extend({}, a.data);
        aData.on = on;
        var aAttrs = a.data.attrs = extend({}, a.data.attrs);
        aAttrs.href = href;
      } else {
        // 没有< a >子代，将侦听器应用于自身
        data.on = on;
      }
    }

    return h(this.tag, data, this.$slots.default)
  }
}

`route-view`

router-view是一个 functional 组件，渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>，根据嵌套路径，渲染嵌套组件

它只有一个名为name的props,这个name还有个默认值，就是default,一般情况下，我们不用传递name,只有在命名视图的情况下，我们需要传递name,命名视图就是在同级展示多个视图，而不是嵌套的展示出来，

router-view组件渲染时是从VueRouter实例._route.matched属性获取需要渲染的组件，也就是我们在vue内部的this.$route.matched上获取的

var View = {
  name: 'RouterView',
  functional: true,
  props: {
    name: {
      type: String,
      default: 'default'
    }
  },
  render: function render (_, ref) {
    var props = ref.props;
    var children = ref.children;
    var parent = ref.parent;
    var data = ref.data;

    // 由devtools用来显示路由器视图标记
    data.routerView = true;

    // 直接使用父上下文的createElement()函数
    // 以便由router-view呈现的组件能够解析命名的插槽
    var h = parent.$createElement;
    var name = props.name;
    var route = parent.$route;
    var cache = parent._routerViewCache || (parent._routerViewCache = {});

    // 确定当前视图深度，同时检查树是否
    // 已被切换为非活动但保持活动状态
    var depth = 0;
    var inactive = false;
    while (parent && parent._routerRoot !== parent) {
      if (parent.$vnode && parent.$vnode.data.routerView) {
        depth++;
      }
      if (parent._inactive) {
        inactive = true;
      }
      parent = parent.$parent;
    }
    data.routerViewDepth = depth;

    // 如果树处于非活动状态并且保持活动状态，则渲染上一视图
    if (inactive) {
      return h(cache[name], data, children)
    }

    var matched = route.matched[depth];
    // 如果没有匹配的路由，则呈现空节点
    if (!matched) {
      cache[name] = null;
      return h()
    }

    var component = cache[name] = matched.components[name];

    // 附加实例注册挂钩
    // 这将在实例的注入生命周期钩子中调用
    data.registerRouteInstance = function (vm, val) {
      // 对于注销，val可能未定义
      var current = matched.instances[name];
      if (
        (val && current !== vm) ||
        (!val && current === vm)
      ) {
        matched.instances[name] = val;
      }
    }

    // 同时在预缓存挂钩中注册实例
    // 如果同一组件实例在不同的路由上被重用
    ;(data.hook || (data.hook = {})).prepatch = function (_, vnode) {
      matched.instances[name] = vnode.componentInstance;
    };

    // 解析 props
    var propsToPass = data.props = resolveProps(route, matched.props && matched.props[name]);
    if (propsToPass) {
      // clone to prevent mutation
      propsToPass = data.props = extend({}, propsToPass);
      // 将未声明的props具作为属性传递
      var attrs = data.attrs = data.attrs || {};
      for (var key in propsToPass) {
        if (!component.props || !(key in component.props)) {
          attrs[key] = propsToPass[key];
          delete propsToPass[key];
        }
      }
    }

    return h(component, data, children)
  }
}