基于锚点的哈希路由:
样式代码:
<body><nav><a href="#/list1">热门推荐</a><a href="#/list2">娱乐热榜</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");// 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":routeView.innerHTML = list1;return;case "#/list2":routeView.innerHTML = list2;return;}}</script></body>
效果预览:
:
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"><!-- 1. vue的路由是基于哈希实现,是用a标签的锚点来实现 --><router-link to="/list1">国内新闻</router-link><router-link to="/list2">娱乐新闻</router-link><!-- 2.路由到的资源显示区域 --><router-view></router-view></nav><script>const list1 = {// 模板template: `<ul><li><a href="">怎么看一个程序员的技术水平</a></li><li><a href="">计算机专业的学生需要每天刷题吗?</a></li><li><a href="">作为程序员,应该如何防猝死？</a></li></ul>`,};const list2 = {// 模板template: `<ul><li><a href="">吵架吵到一半发现对方是对的怎么办?</a></li><li><a href="">哪些笑话可以让你笑一辈子?</a></li><li><a href="">早安打工人是什么梗?</a></li></ul>`,};// 1. 创建路由对象const router = new VueRouter({// 路由配置项routes: [// 每一个路由都是一个对象,每一个对象对应着一个路由地址{ path: "/list1", component: list1 },{ path: "/list2", component: list2 },],});new Vue({// 2. 注册路由router,}).$mount(".app");</script></body>
效果预览:
