监听地址栏hash值的变化

2018-01-27 12:43:28

1  history.js//兼容ie6+

2  hashchange

$(window).on("hashchange", function() {//兼容ie8+和手机端
            $('.div1').append(This.location.hash);
        });

3 pushState//兼容ie9+

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

http://www.cnblogs.com/hustskyking/p/history-api-in-html5.html

$('.a').on('click', function() {// 创建新history实体
             history.pushState({a:'aa'}, '', location.href+'?'+Math.random());
             });
             $('.b').on('click', function() {// 修改新history实体(虽然浏览记录确实生成了2条,但是实际你只能找到被修改后的{a:'bb'})
             history.replaceState({a:'bb'}, '', location.href+'?'+Math.random()+'------');
             });
             window.addEventListener('popstate', function() {// 前进后退触发
                console.log(history);
                console.log(history.state);// 这里是你设置的{a:'aa'}
             });


  • 2020-01-14 01:08:19

    webpack用externals优化echarts

    防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

  • 2020-01-16 08:52:22

    Vue函数式调用组件创建公共组件

    所有组件都需要这么去调用,就会有些许麻烦而且不太美观。像Loading、Toast等这些组件,一页面可以经常用到而且每次显示的内容都可能不一样,这样的话用js的方式【this.$xxx.show(option)】去调用就方便很多,而且代码也更整洁。

  • 2020-01-17 08:37:26

    css transition分别指定多个属性

    transition有四个属性,很多人都会遗忘,分别是transition-property,transition-duration,transition-timing-function,transition-delay,尤其是transition-delay,这个可以实现延迟动画

  • 2020-01-17 08:44:57

    vue keepalive 前进刷新后退不刷新终极解决方案

    另外,我们做路由的时候要有意的根据页面等级做出路由的长度 比如 /a是一级的页面/a/b是二级的页面,下面的文章大家也可以通过判断path的长度来计算rank值,不用有意自定了 这样做的好处有两点,一个就是前进刷新,后退不刷新,还有就是,如果我们做页面进出效果的时候也能排上用场。

  • 2020-01-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。