36_Vue_hash路由的原理

最新推荐文章于 2024-04-05 00:00:00 发布

weixin_44560027

最新推荐文章于 2024-04-05 00:00:00 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/weixin_44560027/article/details/117294595

版权

本文介绍了Vue.js中基于Hash的路由工作原理。通过监听window的hashchange事件，根据URL的hash值变化，动态渲染不同的组件。例如，当hash分别为/home、/list、/goods和/cart时，页面将显示首页、列表、商品详情和购物四个不同内容。默认情况下，显示404页面。这是一个简单的前端路由实现示例，适用于学习和快速原型开发。

摘要由CSDN通过智能技术生成

hash路由的原理：
表面：根据hash值的改变来渲染不同的组件
底层：根据window的hashchange事件来相应不同的组件
1、代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hash路由的原理</title>
    <script src="vue.js">
</script>
</head>
<body>
    <div id="app" class="p-5">
    </div>
    <script>
        /*
             hash路由的原理：
             表面：根据hash值的改变来渲染不同的组件
             底层：根据window的hashchange事件来相应不同的组件
             提示：必须在 服务器 环境下运行
        */
       let app=document.querySelector('#app');
       window.onhashchange=function(){
           //根据hash值不同渲染不同的组件
           let hash=location.hash.slice(1);
           switch(hash){
               case '/home':
                   app.innerHTML='首页'
               break;
               case '/list':
                   app.innerHTML='列表'
               break;
               case '/goods':
                   app.innerHTML='商品详情'
               break;
               case '/cart':
                   app.innerHTML='购物'
               break;
               default:
                   app.innerText='404'
           }
       }
    </script>
</body>
</html>