1.哈希锚点实现一个原生的路由
<nav> <a href="#list1">国内新闻</a> <a href="#list2">娱乐新闻</a></a> </nav> <!-- 该区域用于显示路由的内容 --> <div class="route-view"></div> <script> let list1 = ` <ul> <li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li> <li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li> <li><a href="">返乡人员如何划定？国家卫健委最新回应</a></li> </ul> `; let list2 = ` <ul> <li><a href="">都当妈了还不许人家晒晒娃？</a></li> <li><a href="">都当妈了还不许人家晒晒娃？</a></li> <li><a href="">都当妈了还不许人家晒晒娃？</a></li> </ul> `; // 获取路由的内容显示区元素 const routeView = document.querySelector(".route-view"); window.addEventListener("hashchange", show); // 页面加载完就执行 window.addEventListener("DOMContentLoaded", show); function show() { // console.log(location.hash); switch (location.hash) { case "#list1": routeView.innerHTML = list1; return; case "#list2": routeView.innerHTML = list2; return; default: routeView.innerHTML = list1; } } </script>
2.vue路由模块实现一个前端路由
<!-- 加载vue框架 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 路由模块 --> <script src="vue-router-dev/dist/vue-router.js"></script><body> <nav class="app"> <!-- vue路由锚点 --> <router-link to="/list1">今日话题</router-link> <router-link to="/list2">游戏新闻</router-link> <!-- 路由到的资源显示区域 --> <router-view></router-view> </nav> <script> const list1 = { template: ` <ul> <li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li> <li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li> <li><a href="">80多份裁判文书背后的中老年“养生培训”套路</a></li> </ul> `, }; const list2 = { template: ` <ul> <li><a href="">LPL春季赛：RNG2-0击败OMG！Cryin豪取5杀</a></li> <li><a href="">LPL春季赛：RNG2-0击败OMG！Cryin豪取5杀</a></li> <li><a href="">LPL春季赛：RNG2-0击败OMG！Cryin豪取5杀</a></li> </ul> `, }; // 1. 创建路由 const router = new VueRouter({ // 配置路由 routes: [ { path: "/list1", component: list1 }, { path: "/list2", component: list2 }, ], }); new Vue({ // 2. 注册路由 router, }).$mount(".app"); </script>
