Vue路由机制--简单基础路由 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue路由机制--简单基础路由</title>

    </head>

    <body>
        <div id="app">
         <!-- 基本原理 -->
         <!-- 后端理由
         概念：根据不同的用户URL请求。返回不同的内容
         本质：URL请求 地址与服务器资源之间的对应关系
         SPA:单页面应用程序：
         SAP实现原理：基于URL地址的hash（hash的变化会导致浏览器记录访问历史
         的变化。但是HASH的变化不会触发新的URL请求）
         hash值就是：矛连接
         
         前端理由：
         概念：根据不同的用户事件。显示不同的页面内容；
         本质：用户事件与事件处理函数之前的对应关系
         前端路由负责事件监听。触发事件后。通过事件函数渲染不同的内容； -->
         
         <!-- 实现简易前端路由 -->
         <a href="#/zhuanye">主页</a>
         <a href="#/keji">科技</a>
         <a href="#/caijing">财经</a>
         <a href="#/yule">娱乐</a>
         
         <!-- 根据：is 属性制定组件名称.把对应的组件渲染到componentb标签所在的位置
         可以把component标签当做是[组件的占位符] -->
         <component :is="comName"></component>
        </div>
        
        
    </body>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">    
       const zhuanye={
           template:'<h1>主页信息</h1>'
       }
       const keji={
                  template:'<h1>科技信息</h1>'
       }
       const caijing={
                  template:'<h1>财经信息</h1>'
       }
       const yule={
                  template:'<h1>娱乐信息</h1>'
       }
       
       const vm=new Vue({
           el:'#app',
           data:{
               comName:'zhuanye'
           },
           components:{
               zhuanye,
               keji,
               caijing,
               yule
           }
       })
       
       //监听windows的onhashchange事件。根据获取到的最新的hash值。切换要显示的组件名称
       window.onhashchange=function(){
           //通过location.hash获取当前动态的hash值
           console.log(location.hash)        ;
           switch(location.hash.slice(1)){
               case '/zhuanye':
                 vm.comName='zhuanye';
               break;
               case '/keji':
                 vm.comName='keji';
               break;
               case '/caijing':
                 vm.comName='caijing';
               break;
               case '/yule':
                 vm.comName='yule';
               break;
           }
        }
    </script>
</html>

 

posted @ 2021-07-08 09:50  王彬-效率开发  阅读(76)  评论(0)    收藏  举报