简单单页面路由跳转demo
16lz
2021-05-14
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div class="result"></div></body></html><script type="text/javascript"> function Router() { // 路由储存 this.routes = {}; // 当前路由 this.currentUrl = ''; } Router.prototype = { // 路由处理 route: function (path, callback) { this.routes[path] = callback || function(){}; }, // 页面刷新 refresh: function () { // 当前的hash值 this.currentUrl = location.hash.slice(1) || '/'; // 执行hash值改变后相对应的回调函数 this.routes[this.currentUrl](); }, // 页面初始化 init: function () { // 页面加载事件 window.addEventListener('load', this.refresh.bind(this), false); // hash 值改变事件 window.addEventListener('hashchange', this.refresh.bind(this), false); } } // 全局挂载 window.Router = new Router(); // 初始化 window.Router.init(); let obj = document.querySelector('.result'); function changeConent (cnt) { obj.innerHTML = cnt } // 匹配路由做相应的操作 Router.route('/', function(){ changeConent("首页"); }) Router.route('/item', function(){ changeConent('item页面'); }) Router.route('/list', function(){ changeConent('list页面') })</script>
补充: 模拟mvvm的双向数据绑定
http://hcysun.me/2016/04/28/JavaScript%E5%AE%9E%E7%8E%B0MVVM%E4%B9%8B%E6%88%91%E5%B0%B1%E6%98%AF%E6%83%B3%E7%9B%91%E6%B5%8B%E4%B8%80%E4%B8%AA%E6%99%AE%E9%80%9A%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8F%98%E5%8C%96/
©著作权归作者所有:来自51CTO博客作者迩伶贰的原创作品,如需转载,请注明出处,否则将追究法律责任更多相关文章
- lynx浏览器的使用教程
- 网站url后带spm参数的作用
- WebView性能、体验分析与优化
- 谈谈使用JS库解决小程序跨页传递消息和数据问题的方法
- ppt页面标准尺寸是多少
- 移动端复杂运营页解决方案的探索和实践
- php之字符串实战注册页面
- 【Vue框架学习】过滤器、自定义指令、生命周期、动画、组件、路
- Vue组件的注册与挂载流程,实例演示; 2. 路由原理与注册流程,实例