ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

路由基础

2021-05-04 18:01:33  阅读:16  来源: 互联网

标签:case zhuye 基础 comName vm const 路由


路由分前端路由和后端路由;
后端路由是更具不同用户的rul请求,返回不同内容,本质上是url请求地址与服务器资源之间的对应关系;
前端路由1:根据不同的用户事件,显示不同的页面内容本质是用户事件与事件处理函数之间的对应关系。
对于前端路由可以基于hash来实现举个例子

 <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <a href="#/caijing">财经</a>
        <a href="#/yule">娱乐</a>
        <component :is="comName"></component>
    </div>
  
 const zhuye ={
            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:'zhuye'
            },
            components:{
                zhuye,
          keji,
          caijing,
          yule
            }
        }) 
        window.onhashchange = function(){
            console.log(location.hash);
            switch(location.hash.slice(1)){
                case '/zhuye':
                    vm.comName = 'zhuye';
                    break;
                case '/keyi':
                    vm.comName = 'keji';
                    break;
                case '/caijing':
                    vm.comName = 'caijing';
                    break;
                case '/yule':
                    vm.comName = 'yule';
                    break;
            }
        }

用componend 标签调用不同的组件在用onhashchange事件来切换不同组件。相当于用户点击a标签触发事件由前端路由截取做处理后交给事件处理函数,再返回相应内容到浏览器

标签:case,zhuye,基础,comName,vm,const,路由
来源: https://blog.csdn.net/qq_46433453/article/details/116403063

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有