路由基础

路由分前端路由和后端路由；
后端路由是更具不同用户的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