今天所学心得、笔记
1、哈希（锚点）原生实现前端路由
<body><nav> <a href="#/list1">国际新闻</a> <a href="#/list2">科技新闻</a></nav><!-- 用于显示路由的内容 --><div class="route-view"></div><script> const list1 = ` <ul> <li>马斯克：我们将在五年半内登陆火星</li> <li>马斯克：我们将在五年半内登陆火星</li> <li>马斯克：我们将在五年半内登陆火星</li> </ul> `; const list2 = ` <ul> <li>抖音大战春晚红包：社交、支付、电商齐上阵</li> <li>抖音大战春晚红包：社交、支付、电商齐上阵</li> <li>抖音大战春晚红包：社交、支付、电商齐上阵</li> </ul> `; // 获取路由显示区 const routerView = document.querySelector(".route-view"); // hashchange: url中的锚点变化时会自动触发这个事件 window.addEventListener("hashchange", show); // DOMContentLoaded: 只要dom树创建完成就会触发,load:要等js执行完成和图片加载完成才触发 window.addEventListener("DOMContentLoaded", show); function show() { console.log(location.hash); switch (location.hash) { case "#/list1": routerView.innerHTML = list1; return; case "#/list2": routerView.innerHTML = list2; return; default: routerView.innerHTML = list1; } }</script></body>
2、vue路由模块, 前端路由
<body><nav class="app"> <router-link to="/list1">国际新闻</router-link> <router-link to="/list2">科技新闻</router-link> <!-- 路由的资源显示区 --> <router-view></router-view></nav><script> const list1 = { template: ` <ul> <li>马斯克：我们将在五年半内登陆火星</li> <li>马斯克：我们将在五年半内登陆火星</li> <li>马斯克：我们将在五年半内登陆火星</li> </ul> `,}; const list2 = { template: ` <ul> <li>抖音大战春晚红包：社交、支付、电商齐上阵</li> <li>抖音大战春晚红包：社交、支付、电商齐上阵</li> <li>抖音大战春晚红包：社交、支付、电商齐上阵</li> </ul> `,}; // 1. 创建路由对象 const router = new VueRouter({ //路由配置 routes: [ // 每一个路由都是一个对象,每一个对象对应着一个路由地址 { path: "/list1", component: list1 }, { path: "/list2", component: list2 }, ] }); //2. 注册路由 new Vue({ el: ".app", // router: router, router, })</script></body>
