什么是前端路由?

最新推荐文章于 2022-05-19 12:07:07 发布

yanggreater

最新推荐文章于 2022-05-19 12:07:07 发布

阅读量443

点赞数

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

本文链接：https://blog.csdn.net/yanggreater/article/details/83047971

版权

路由分为前端路由和后端路由，但是后端路由如果是页面内容比较多，那么由于请求时间问题，就会导致页面出现暂时性的白页（也就是所谓的卡顿），那么什么是前端路由，前端路由说白了就是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>

下图为效果图：

代码虽简单，但是相信对学习前端路由，比如说vue-router的同学有所帮助

yanggreater

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是前端路由?

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

扫一扫