各种前端框架中的路由原理解析

来源：互联网发布：黑客技术入门教程软件编辑：程序博客网时间：2024/05/22 13:45

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>我的路由</title></head><body><a href="#/home">HOME</a><a href="#/cart">CART</a>  <p>哈哈</p>  <router-view></router-view>  <div>      嘻嘻  </div></body></html><script>  // 根据地址栏锚值的没同在router-view位置显示不同的内容  var Home = {template: '<div>我是Home</div>'}  var Cart = {template: '<div>我是Cart</div>'}  var routes = [    {name:'home',path:'/home',component:Home},    {name:'cart',path:'/cart',component:Cart}  ]  // 1.监听地址栏锚点改变的事件hashchange  window.onhashchange = function () {    console.log('只要锚变化，就会执行这个方法')    // 2.要判断当前地址栏中锚点值是什么    // 如果当前的锚点值与我们写的规则中的routes对应，就显示相应的component    var hash = location.hash // #/xxx    // splice    hash = hash.slice(1, hash.length)    // 3.遍历routes，去判断每个元素的path 是否与hash相等    for (var i = 0; i < routes.length; i++) {      var item = routes[i]      if(item.path === hash){        // 当相等时，就把当前元素的component属性的对应的内容插入到页面        // router-view        var oView = document.querySelector('router-view')        oView.innerHTML = item.component.template      }    }  }</script>

1 0