什么是前端路由?

最新推荐文章于 2025-05-26 19:30:49 发布

yanggreater

最新推荐文章于 2025-05-26 19:30:49 发布

阅读量501

点赞数

CC 4.0 BY-SA版权

文章标签： vue vue-router 前端路由

本文链接：https://blog.youkuaiyun.com/yanggreater/article/details/83047971

本文深入解析了前端路由的工作机制，通过hashchange事件监听URL锚点变化，实现页面内容的动态替换，避免了传统后端路由可能带来的白屏现象。文章提供了一个简单的示例代码，展示了如何使用JavaScript实现前端路由，适合初学者理解和掌握。

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

路由分为前端路由和后端路由，但是后端路由如果是页面内容比较多，那么由于请求时间问题，就会导致页面出现暂时性的白页（也就是所谓的卡顿），那么什么是前端路由，前端路由说白了就是t通过hashchange事件监听url地址中锚点的变化，做到不更新页面的内容替换，替换相信大家都明白，同一个页面，内容改变而已，下面是前端路由通过js实现其原理;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	
</head>
<script type="text/javascript">
		
  window.onload = function() {
    var div = document.getElementById('app');
    window.addEventListener('hashchange',function(){
      switch(location.hash){
        case '#/login' :
          div.innerHTML = '<h1>这是登录页面</h1>';
          break;
        case '#/register':
          div.innerHTML = '<h1>这是注册页面</h1>';
          break;
      }
    })
  }

</script>
<body>
    <a href="#/login">点我去登录</a>
    <a href="#/register">点我去注册</a>
	<div id="app"></div>
</body>
</html>

下图为效果图：