重学Vue（一）—— 前端路由

2023年4月28日 114次阅读 来源: 闪闪发光的狼

Vue写了段时间，开发页面起来已经是唰唰唰了，但是对其中原理却知之甚少。那可不行，为了不错过任何的学习点（在面试官前挺直腰板），得从每个角落，仔仔细细重新学一遍。

为什么要有前端路由

有些WEB每访问一个URL都会从服务端请求一个新的页面（html），这样做往往会造成多余的文件请求和重复的html代码。

<ul>
  <li><a href="/index.html"></a></li>
  <li><a href="/user.html"></a></li>
  <li><a href="/device.html"></a></li>
</ul>

不知道有没有人经历过上面这种项目。每次点击a标签都会刷出一个新页面。
ajax可以解决这个问题，整体只刷新一次页面（第一次访问域名）。之后的页面可以通过ajax获取html内容，然后再通过dom操作渲染到某个页面元素。这么做的缺点就是所有的页面都是同一个url，用户无法复制到想要的地址。
所以前端路由出现了，同时解决上面的两个问题。前端监听url的变化，并实现页面的更改，url虽然变化了，但实际的页面还是原来的页面，没有刷新页面。

实现原理

咦，我都访问不同url了，你怎么会不刷新页面呢。
有这么一个常用的功能相信大家应该都知道

命名锚
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端

常用的就是定位文档顶部。只要在url上加一个#，它就能回到顶部，且不刷新页面。#号后面的字符是用于浏览器的，不会发送到服务端。所以我们可以监听这个值来判断加载的内容。通过读取location.hash可以知道当前页面所处的位置，比如url是‘jianshu.com/#/123’，那么他的location.hash就是‘/123’。通过hashchange事件可以监听location.hash的变化，再通过hash值来判断需要加载的页面。大致就是ajax请求html渲染的同时，还要改变一下hash值。反过来监听到hash值的改变也要用ajax加载对应的html。

history有两个API也可以改变URL但不刷新页面。
history.pushState,history.replaceState都可以无刷新的改变url。主要区别在于pushState会在浏览器中创建一条新的历史纪录，而replaceState仅仅替换将当前地址为指定URL。
popstate： 浏览器点击前进后退时触发的事件。
写个测试代码在控制台跑一下：

var stateObj= {foo:'bar'};
window.addEventListener('popstate',function(){
  alert(1);
});
history.pushState(stateObj, "page 2", "bar.html");

这个时候url已经变了。但是pushState不会触发popstate事件，再执行下

history.back();

就能弹出1了。通过这点就可以实现前端路由，和上面通过hashchange事件监听hash变化类似。

实现一个简单路由

利用vue的is特性和hash的知识写一个简单路由。
首先实现一个router类

class Router{
    constructor(){
        this.routes = new Map(); //维护一个路由表
        this.currentUrl = '';  //当前路径
        this.bind(); //绑定事件
    }

    bind(){
        //针对浏览器第一次输url的情况
        window.addEventListener('load',this.refresh.bind(this),false);

        //针对浏览器改变url的情况
        window.addEventListener('hashchange',this.refresh.bind(this),false);
    }

    route(path,callback){

        //添加路由，并设置访问该路由的回调函数
        this.routes.set(path,callback);
    }

    replace(path){  //切换路由
        this.currentUrl = path;
        this.routes.get(path)(); //执行添加路由时设置的回调函数
        location.hash = path; //切换路由的时候要修改url
    }

    refresh(){ //刷新，从url中获取当前路由
        this.currentURL = location.hash.slice(1) || '/one';
        if(this.currentURL == '/')  this.currentURL = '/one';
        this.routes.get(this.currentURL)();
    }
}

Vue文件

<div id="app">
  <ul>
    <li @click="$router.replace('/one')">1</li>
    <li @click="$router.replace('/two')">2</li>
    <li @click="$router.replace('/three')">3</li>
  </ul>
  <div :is="currentComponent">
  </div>
</div>

li调用路由的replace方法，触发绑定的回调，改变currentComponent从而达到更换组件的效果。

router.route('/one',()=>{
    this.currentComponent = 'tab-1';  //更换组件
})

整体代码见Github ，有错误望指正。为了让route回调函数的this指向Vue（通过this.currentComponent = ‘tab-1’来更换组件）我在Vue的created中生成route，并用箭头函数绑定this，不知道还有没有更好的办法。

    原文作者：闪闪发光的狼
    原文地址: https://www.jianshu.com/p/35be0f4b6ad3
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞