前端路由&webpack基础配置

• SPA是单页面应用程序(single page application),通俗来讲就是在一个页面开发一个完整网站的功能
• 优点:
  • 不需要跳转页面,局部更新页面内容
  • 前端组件化
• 缺点:
  • 首屏加载慢(第一次访问慢,按需加载)
  • 开发复杂(所有的功能都在一个页面完成,可使用webpack模块化开发)
  • 不利于SEO搜索引擎优化(使用服务端渲染)

2. 前端路由:

• 根据不用的URL标识符渲染不同的组件(不同的网页内容)
• 路由实现原理:
  • hash哈希(锚点) 通过hashchange监听URL标识符改变,显示不同的内容

    <ul>
        <li><a href="#login">鲁班</a></li>
        <li><a href="#home">提莫</a></li>
        <li><a href="#list">剑姬</a></li>
    </ul>
    <div id="app"></div>
    <script>
    // 监听hash值的不用,让页面显示不同的内容
    window.onhashchange = function() {
        let app = document.getElementById('app');
        // 获取hash值
        let hash = location.hash.substr(1);
        // 根据标识展现不同的内容 局部更新
        switch(hash) {
            case 'login':
                app.innerHTML = '托马斯回旋...';    
                break;
            case 'home':
                app.innerHTML = '正在路上...';
                break;
            case 'list':
                app.innerHTML = '华尔兹...';
                break;
            }
        }
    </script>
    复制代码