路由知识、基于锚点的哈希模式路由、使用vue路由模块路由

1.路由是什么

简单来说就是查找资源的方式。

2.路由的分类

  • 前端路由: 通过动态改变 url 实现
  • 后端路由: 资源通常放在服务器上

3.前端路由

#后面的内容变化（锚点）" class="reference-link">3.1 哈希模式: 监听 url 中的#后面的内容变化（锚点）

3.1.1 锚点的作用

  1. 1. 锚点可以改变Url地址,实现在当前页面内部的不同区域之间进行跳转
  2. 2. 锚点是在当前页面中跳转,所以页面不会刷新
  3. 3. 使用锚点可以完成SPA的二大目标:既改变URL地址,又不刷新页面

3.1.2 基于锚点的哈希路由模式路由

  2.   <nav>
  3.     <a href="#/list1">国际新闻</a>
  4.     <a href="#/list2">娱乐新闻</a>
  5.   </nav>x
  7.   <!-- 该区域专用于显示路由的内容 -->
  8.   <div class="route-view"></div>
  10.   <script>
  11.     let list1 = `
  12.         <ul>
  13.           <li>news-list1-1</li>
  14.           <li>news-list1-2</li>
  15.           <li>news-list1-3</li>
  16.         </ul>
  17.         `;
  18.     let list2 = `
  19.         <ul>
  20.           <li>news-list2-1</a></li>
  21.           <li>news-list2-2</a></li>
  22.           <li>news-list2-3</a></li>
  23.         </ul>
  24.         `;
  25.     // 获取路由的内容显示区元素
  26.     const routeView = document.querySelector(".route-view");
  27.     //添加锚点触发事件
  28.     window.addEventListener("hashchange", show);
  29.     //页面加载后初始化显示的数据
  30.     // window.addEventListener("load", show);//方式一
  31.     window.addEventListener("DOMContentLoaded", show);//方式二 
  32.     //两者之间区别：DOMContentLoaded: 只要dom树创建完成就会触发；load:要等js执行完成和图片加载完成才触发
  34.     function show() {
  35.       console.log(location.hash);
  36.       switch (location.hash) {
  37.         case "#/list1":
  38.           routeView.innerHTML = list1;
  39.           return;
  40.         case "#/list2":
  41.           routeView.innerHTML = list2;
  42.           return;
  43.         default:
  44.           routeView.innerHTML = list1;
  45.       }
  46.     }
  47.   </script>

3.1.23 使用vue路由模块的路由

vue的路由是基于哈希实现,是用a标签的锚点来实现

  1. <!-- 加载vue框架 -->
  2.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  3.   <!-- 路由模块（下载地址：https://github.com/vuejs/vue-router） -->
  4.   <script src="vue-router-dev/dist/vue-router.js"></script>
  6. <nav class="app">
  7.     <router-link to="/list1">国内新闻</router-link>
  8.     <router-link to="/list2">娱乐新闻</router-link>
  9.     <!-- 路由到的资源显示区域 -->
  10.     <router-view></router-view>
  11. </nav>
  12. <script>
  13.     const list1 = {
  14.       template: `
  15.                 <ul>
  16.                   <li>news-list1-1</li>
  17.                   <li>news-list1-2</li>
  18.                   <li>news-list1-3</li>
  19.                 </ul>
  20.               `,
  21.     };
  22.     const list2 = {
  23.       template: `
  24.                 <ul>
  25.                   <li>news-list2-1</a></li>
  26.                   <li>news-list2-2</a></li>
  27.                   <li>news-list2-3</a></li>
  28.                 </ul>
  29.               `,
  30.     };
  31.     // 1. 创建路由对象
  32.     const router = new VueRouter({
  33.       // 路由配置项
  34.       routes: [
  35.         // 每一个路由都是一个对象,每一个对象对应着一个路由地址
  36.         { path: "/list1", component: list1 },
  37.         { path: "/list2", component: list2 },
  38.       ],
  39.     });
  40.     new Vue({
  41.       el: ".app",
  42.       // 2. 注册路由
  43.       router: router,
  44.     });
  45. </script>

锚点使用 location.hash; window.location: 描述的是当前的url信息; hashchange: url中的锚点变化时会自动触发这个事件

window.history对象,监听popstate事件" class="reference-link">3.2 历史记录: window.history对象,监听popstate事件

3.2.1 用历史记录对象实现前端路由模式

  1. <nav>
  2.   <a href="/list1">国际新闻</a>
  3.   <a href="/list2">娱乐新闻</a>
  4. </nav>
  5. <div class="router-view"></div>
  7. <script>
  8. const list1 = `
  9.   <ul>
  10.     <li>news-list1-1</li>
  11.     <li>news-list1-2</li>
  12.     <li>news-list1-3</li>
  13.   </ul>
  14.   `;
  15. const list2 = `
  16.   <ul>
  17.     <li>news-list2-1</a></li>
  18.     <li>news-list2-2</a></li>
  19.     <li>news-list2-3</a></li>
  20.   </ul>
  21.   `;
  23. const routeView = document.querySelector(".router-view");
  24. // 获取到所有a标签的href
  25. const links = document.querySelectorAll("nav a[href]");
  27. links.forEach(
  28.   (link) =>
  29.     (link.onclick = (ev) => {
  30.       // 禁用掉a标签的默认行为
  31.       ev.preventDefault();
  32.       // history.pushState(状态对象,标题,url) 设置浏览器地址
  33.       history.pushState(null, "", link.href);
  34.       // 手动更新了url,但是popstate事件监听不到这个变化,需要调用一个函数
  35.       show();
  36.     })
  37. );
  39. window.addEventListener("popstate", show);//监听浏览器地址变化
  40. function show() {
  41.   console.log(location.pathname);
  42.   switch (location.pathname) {
  43.     case "/list1":
  44.       routeView.innerHTML = list1;
  45.       return;
  46.     case "/list2":
  47.       routeView.innerHTML = list2;
  48.       return;
  49.     default:
  50.       routeView.innerHTML = list1;
  51.   }
  52. }
  53. </script>

4. SPA

  • SPA: 单页面应用程序
  • 目的: 不刷新页面,实现 url 的变化和更新视图（如ajax也是实现此目的的方式之一）

更多相关文章

  1. 0416作业-Vue组件及路由
  2. Vue：1.Vue组件的注册与挂载流程,实例演示; 2. 路由原理与注册流程
  3. 4.25课堂笔记(网络)
  4. Vue组件的注册与挂载流程; 路由原理与注册流程 ----0416
  5. 【Vue框架学习】组件注册、组件通信、前端路由实现原理等知识点
  6. J2EE Listener 监听器教程
  7. elk7.4+filebeat收集日志
  8. RAC 增加SCAN IP
  9. eNSP：静态路由中的路由备份

随机推荐

  1. Linux文件权限查看及修改命令chmod
  2. fedora下vim的安装
  3. Centos7 安装部署 Python-3.6.1
  4. 在Linux中使用PAM进行身份验证为什么它可
  5. 删除目录软链接注意事项
  6. linux网卡实现高可用：team链路聚合
  7. Linux网络设备驱动架構學習（三）
  8. 一&#183;创建Linux服务器（基于阿里云）
  9. Linux中动态链接库总结
  10. Linux工程实践学习笔记——基于主机系统