Blogger Information
Blog 46
fans 0
comment 0
visits 39422
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用哈希(锚点)原生,vue路由模块这二种分别实现一个前端路由
lus菜
Original
666 people have browsed it

基于锚点的哈希路由:

样式代码:

  1. <body>
  2. <nav>
  3. <a href="#/list1">热门推荐</a>
  4. <a href="#/list2">娱乐热榜</a>
  5. </nav>
  6. <!-- 该区域专用于显示路由的内容 -->
  7. <div class="route-view"></div>
  8. <script>
  9. let list1 = `
  10. <ul>
  11. <li><a href="">怎么看一个程序员的技术水平</a></li>
  12. <li><a href="">计算机专业的学生需要每天刷题吗?</a></li>
  13. <li><a href="">作为程序员,应该如何防猝死?</a></li>
  14. </ul>
  15. `;
  16. let list2 = `
  17. <ul>
  18. <li><a href="">吵架吵到一半发现对方是对的怎么办?</a></li>
  19. <li><a href="">哪些笑话可以让你笑一辈子?</a></li>
  20. <li><a href="">早安打工人是什么梗?</a></li>
  21. </ul>
  22. `;
  23. // 获取路由的内容显示区元素
  24. const routeView = document.querySelector(".route-view");
  25. // hashchange: url中的锚点变化时会自动触发这个事件
  26. window.addEventListener("hashchange", show);
  27. // DOMContentloaded: 只要dom树创建完成就会触发,load:要等js执行完成和图片加载完成才触发
  28. window.addEventListener("DOMContentLoaded", show);
  29. function show() {
  30. console.log(location.hash);
  31. switch (location.hash) {
  32. case "#/list1":
  33. routeView.innerHTML = list1;
  34. return;
  35. case "#/list2":
  36. routeView.innerHTML = list2;
  37. return;
  38. }
  39. }
  40. </script>
  41. </body>

效果预览:


:

vue路由原理实现:

样式代码:

  1. <!-- 加载vue框架 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  3. <!-- 路由模块 -->
  4. <script src="vue-router-dev/dist/vue-router.js"></script>
  5. <body>
  6. <nav class="app">
  7. <!-- 1. vue的路由是基于哈希实现,是用a标签的锚点来实现 -->
  8. <router-link to="/list1">国内新闻</router-link>
  9. <router-link to="/list2">娱乐新闻</router-link>
  10. <!-- 2.路由到的资源显示区域 -->
  11. <router-view></router-view>
  12. </nav>
  13. <script>
  14. const list1 = {
  15. // 模板
  16. template: `
  17. <ul>
  18. <li><a href="">怎么看一个程序员的技术水平</a></li>
  19. <li><a href="">计算机专业的学生需要每天刷题吗?</a></li>
  20. <li><a href="">作为程序员,应该如何防猝死?</a></li>
  21. </ul>
  22. `,
  23. };
  24. const list2 = {
  25. // 模板
  26. template: `
  27. <ul>
  28. <li><a href="">吵架吵到一半发现对方是对的怎么办?</a></li>
  29. <li><a href="">哪些笑话可以让你笑一辈子?</a></li>
  30. <li><a href="">早安打工人是什么梗?</a></li>
  31. </ul>
  32. `,
  33. };
  34. // 1. 创建路由对象
  35. const router = new VueRouter({
  36. // 路由配置项
  37. routes: [
  38. // 每一个路由都是一个对象,每一个对象对应着一个路由地址
  39. { path: "/list1", component: list1 },
  40. { path: "/list2", component: list2 },
  41. ],
  42. });
  43. new Vue({
  44. // 2. 注册路由
  45. router,
  46. }).$mount(".app");
  47. </script>
  48. </body>

效果预览:

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post