Java教程

路由基础

本文主要是介绍路由基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

路由分前端路由和后端路由;
后端路由是更具不同用户的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标签触发事件由前端路由截取做处理后交给事件处理函数,再返回相应内容到浏览器

这篇关于路由基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!