vue学习之路（路由）

路由是什么

一句话，查找资源的一种方式

路由的分类

  • 前端路由：通过动态改变 url 实现，不会和后端服务器发生交互
  • 后端路由：资源通常放在服务器上

前端路由

  • 哈希模式：监听 url 中的#后面的内容变化/锚点
  • 历史记录：window.history对象，监听popstate事件

SPA

  • SPA：单页面应用程序
  • 目标：不刷新页面，实现 url 的变化和更新视图 / ajax

锚点的作用

学习路由之前先回忆下锚点

  1. 锚点可以改变url地址，实现在当前页面内部的不同区域之间跳转
  2. 因为是在当前页面中跳转，所以页面不会刷新
  3. 所以使用锚点可以完成SPA的两大目标：即可以改变url，又不想刷新页面
  1.   <body>
  2.     <nav>
  3.       <a href="#list1">国内新闻</a>
  4.       <a href="#list2">娱乐新闻</a>
  5.     </nav>
  6.     <ul id="list1">
  7.       <li><a href="">I have a dream</a></li>
  8.       <li><a href="">I have a dream</a></li>
  9.       <li><a href="">I have a dream</a></li>
  10.     </ul>
  12.     <ul id="list2" style="position: relative; top: 40em">
  13.       <li><a href="">娱乐新闻title</a></li>
  14.       <li><a href="">娱乐新闻title</a></li>
  15.       <li><a href="">娱乐新闻title</a></li>
  16.     </ul>
  18.     <a href="#" style="position: absolute; right: 1em; bottom: 1em">回到顶部</a>
  19.   </body>

基于锚点的哈希路由模式

通过hashchange事件来监听变化

  1.     <nav>
  2.       <a href="#/list1">国内新闻</a>
  3.       <a href="#/list2">娱乐新闻</a>
  4.     </nav>
  6.     <!-- 该区域专用于显示路由的内容 -->
  7.     <div class="route-view"></div>
  9.     <script>
  10.       let list1 = `
  11.       <ul id="list1">
  12.       <li><a href="">I have a dream</a></li>
  13.       <li><a href="">I have a dream</a></li>
  14.       <li><a href="">I have a dream</a></li>
  15.       </ul>
  16.       `;
  17.       let list2 = `
  18.       <ul id="list2">
  19.       <li><a href="">娱乐新闻title</a></li>
  20.       <li><a href="">娱乐新闻title</a></li>
  21.       <li><a href="">娱乐新闻title</a></li>
  22.     </ul>
  23.       `;
  24.       // 获取路由的内容显示区元素
  25.       const routeView = document.querySelector(".route-view");
  26.       // console.log(routeView);
  27.       // 锚点使用 location.hash
  28.       // window.location:描述的是当前的url信息
  29.       // console.log(location.hash);
  30.       // hashchange:Url中的锚点变化时会自动触发这个事件
  31.       window.addEventListener("hashchange", show);
  32.       // window.addEventListener("load", show);
  33.       // 只要dom树创建完成就触发，load：要等js执行完成和图片加载完成才触发
  34.       window.addEventListener("DOMContentLoaded", show);
  35.       function show() {
  36.         switch (location.hash) {
  37.           case "#/list1":
  38.             routeView.innerHTML = list1;
  39.             break;
  40.           case "#/list2":
  41.             routeView.innerHTML = list2;
  42.             break;
  43.           default:
  44.             routeView.innerHTML = list1;
  45.         }
  46.       }
  47.     </script>

vue路由原理与实现

首先要下载 vue-router 库

  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>
  6.     <nav class="app">
  7.       <!-- 1. vue 的路由是基于哈希实现，是用a标签的锚点来实现 -->
  8.       <router-link to="/list1">国内新闻</router-link>
  9.       <router-link to="/list2">娱乐新闻</router-link>
  11.       <!-- 2. 路由到的资源显示区域 -->
  12.       <router-view></router-view>
  13.     </nav>
  15.     <script>
  16.       // 1. 创建路由对象
  17.       const router = new VueRouter({
  18.         // 路由配置项
  19.         routes: [
  20.           // 每一个路由都是一个对象，每一个对象都对应着一个路由地址
  21.           {
  22.             path: "/list1",
  23.             component: {
  24.               template: `
  25.                           <ul id="list1">
  26.                             <li><a href="">I have a dream</a></li>
  27.                             <li><a href="">I have a dream</a></li>
  28.                             <li><a href="">I have a dream</a></li>
  29.                           </ul>                        
  30.                         `,
  31.             },
  32.           },
  33.           {
  34.             path: "/list2",
  35.             component: {
  36.               template: `
  37.                           <ul id="list2">
  38.                             <li><a href="">娱乐新闻title</a></li>
  39.                             <li><a href="">娱乐新闻title</a></li>
  40.                             <li><a href="">娱乐新闻title</a></li>
  41.                           </ul>                       
  42.                         `,
  43.             },
  44.           },
  45.         ],
  46.       });
  48.       new Vue({
  49.           el:".app",
  50.           // 2. 注册路由
  51.           router:router,
  52.       })
  53.     </script>

还可以修整下代码 将component 中的对象提出去写到变量中

  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.     <nav class="app">
  6.       <!-- 1. vue 的路由是基于哈希实现，是用a标签的锚点来实现 -->
  7.       <router-link to="/list1">国内新闻</router-link>
  8.       <router-link to="/list2">娱乐新闻</router-link>
  10.       <!-- 2. 路由到的资源显示区域 -->
  11.       <router-view></router-view>
  12.     </nav>
  14.     <script>
  15.       const list1 = {
  16.         template: `
  17.                           <ul id="list1">
  18.                             <li><a href="">I have a dream</a></li>
  19.                             <li><a href="">I have a dream</a></li>
  20.                             <li><a href="">I have a dream</a></li>
  21.                           </ul>                        
  22.                         `,
  23.       };
  24.       const list2 = {
  25.         template: `
  26.                           <ul id="list2">
  27.                             <li><a href="">娱乐新闻title</a></li>
  28.                             <li><a href="">娱乐新闻title</a></li>
  29.                             <li><a href="">娱乐新闻title</a></li>
  30.                           </ul>                       
  31.                         `,
  32.       };
  33.       // 1. 创建路由对象
  34.       const router = new VueRouter({
  35.         // 路由配置项
  36.         routes: [
  37.           // 每一个路由都是一个对象，每一个对象都对应着一个路由地址
  38.           { path: "/list1", component: list1 },
  39.           { path: "/list2", component: list2 },
  40.         ],
  41.       });
  43.       new Vue({
  44.         el: ".app",
  45.         // 2. 注册路由
  46.         // router: router,
  47.         //属性名和同作用域属性值相同，可以只写一个
  48.         router,
  49.       });
  50.     </script>

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

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

这一波操作下来感觉官方支持的 vue-route 库更好理解

更多相关文章

  1. 面试官：讲一下Jvm中如何判断对象的生死？
  2. Java对象为啥要实现Serializable接口？
  3. 怎么理解java的面向对象及三个特性
  4. 深入 Java 虚拟机之面试总结篇
  5. 《JS对象与流程控制》
  6. Kubernetes 入门到进阶实战
  7. Java 对象的哈希值是每次 hashCode() 方法调用重计算么？
  8. HCDA 协议配置
  9. JS对象与流程控制

随机推荐

  1. 使用PULL解析XML文件时循环过程的示例代
  2. XML实体扩展攻击代码实例分享
  3. XML开发环境的建立详解
  4. xml模版，自定义按钮背景
  5. 详解lxml处理xml时的字符编码问题
  6. XML概述以及Pull解析的示例代码
  7. 详细介绍Linq读取XML的示例代码
  8. XML的简介与开发详解（图文）
  9. XML文件解析汇总SAX/DOM/PULL的详细介绍
  10. XmlDocument操作xml文档的示例代码