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

最新推荐文章于 2024-06-19 09:21:37 发布

ITzhongzi

最新推荐文章于 2024-06-19 09:21:37 发布

阅读量1.9k

点赞数 1

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/ITzhongzi/article/details/70339685

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

<!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>

ITzhongzi

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
各种前端框架中的路由原理解析

html>html lang="en">head> meta charset="UTF-8"> title>我的路由title>head>body>a href="#/home">HOMEa>a href="#/cart">CARTa> p>哈哈p> router-view>router-view> div> 嘻嘻 div>body>html>
复制链接

扫一扫