简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >vue学习之路（路由）

vue学习之路（路由）

培(信仰)
培(信仰)原创
2021年02月21日 16:27:35575浏览

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 库更好理解

上一条：0201-常用字符串函数下一条：grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多