1. 使用哈希（锚点）原生实现一个前端路由;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>锚文本</title></head><body><nav><a href="#list1" >娱乐新闻</a> <a href="#list2">国际新闻</a></nav><div class="renew-viewer"></div><a href="" style="position:absolute;bottom:0em;">回到顶部</a><script>// 1.锚点：可以通过改变URL地址，实现在当前页面内部不同区域实现跳转// 2.由于在当前页面内部跳转，故不会刷新// 3.因此使用锚点可以完成SPA的两大目标:既想改变URL，又不刷新页面const list1=`<ul><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li></ul>`;const list2=`<ul id="list2"><li>娱乐圈的追星不再大行其道，已回归到该有的位置</li><li>谢霆锋张柏芝疑似复合</li><li>王菲疑似另结新欢</li><li>王宝强传新婚</li><li>马蓉喊话吴京出演战狼三</li></ul>`;const renew=document.querySelector('.renew-viewer');console.log(window.location.hash);window.addEventListener('hashchange',show);//window.addEventListener('load',show);//DOMContentLoaded在DOM树和css树（有些浏览器不等css树执行完成）创建完成就会触发,load在图片和js加载完成时候触发//DOMContentLoaded先执行window.addEventListener('DOMContentLoaded',show);function show(){with(console){log(window.location.hash);}switch(window.location.hash){case '#list1':renew.innerHTML=list1;break;case '#list2':renew.innerHTML=list2;break;default:renew.innerHTML=list1;}}</script></body></html>
效果:
2. 使用vue路由模块实现一个前端路由
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>VUE框架原理</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="vue-router-dev/dist/vue-router.js"></script></head><body><nav id="app"><!-- 1.vue的路由是基于hash实现的,使用a标签的锚点来实现 --><router-link to="/list1" >国际新闻</router-link><router-link to="/list2" >娱乐新闻</router-link></router-link><!-- 路由到的资源显示区： --><router-view></router-view></nav><script>//创建路由对象const router = new VueRouter({//路由配置项目routes:[//每一个路由都是一个对象，每个对象对应一个路由{path:'/list1',component:{template:`<ul><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li><li>资本主义国家疑似新冠病毒的源头</li></ul>`,}},//每一个路由都是一个对象，每个对象对应一个路由{path:'/list2',component:{template:`<ul id="list2"><li>娱乐圈的追星不再大行其道，已回归到该有的位置</li><li>谢霆锋张柏芝疑似复合</li><li>王菲疑似另结新欢</li><li>王宝强传新婚</li><li>马蓉喊话吴京出演战狼三</li></ul>`,}},],});new Vue({//注册路由router:router,}).$mount('#app');</script></body></html>
效果：
