Community Learn Tools Library Leisure
search
English
Home > List of blog posts > VUE中使用哈希（锚点）原生|vue路由模块方法实现前端路由
Blogger Information
Blog 41
fans 0
comment 0
visits 41123
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
VUE中使用哈希（锚点）原生|vue路由模块方法实现前端路由
幸福敲门的博客
Original
1113 people have browsed it

作业内容：

  1. 使用哈希（锚点）原生实现一个前端路由;
  2. 使用vue路由模块实现一个前端路由

一、使用哈希（锚点）原生实现一个前端路由

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基于锚点的哈希路由模式</title>
  7.   </head>
  8.   <body>
  9.     <nav>
  10.       <a href="#/xw1">军事</a>
  11.       <a href="#/xw2">体育</a>
  12.       <a href="#/xw3">文化</a>
  13.     </nav>
  14.     <!-- 该区域专用于显示路由的内容 -->
  15.     <div class="route-view"></div>
  16.     <script>
  17.       let xw1 = `
  18.         <ul>
  19.           <li><a href="">中国如何造隐轰?已曝光两个奇怪飞翼模型”</a></li>
  20.           <li><a href="">歼20翼下外挂2枚PL15导弹试飞 将开启"野兽"模式(图)”</a></li>
  21.           <li><a href="">美将军：除了中国海军明显增长外 我没看到重大变化”</a></li>
  22.         </ul>
  23.         `;
  25.       let xw2 = `
  26.         <ul>
  27.           <li><a href="">库里26分勇士轻取马刺 吹杨38分卡皇27+26老鹰获连胜。</a></li>
  28.           <li><a href="">连续5场最少丢109分!篮网死穴在这 帕金斯赛后炮轰欧文。</a></li>
  29.           <li><a href="">塞克斯顿天神下凡加时连拿15分 过去一周NBA增11人阳性。</a></li>
  30.         </ul>
  31.         `;
  32.       let xw3 = `
  33.         <ul>
  34.           <li><a href="">少林寺等中原名寺“闭门谢客”</a></li>
  35.           <li><a href="">陕西发现两座唐代纪年壁画墓 一墓主为“弼马温”。</a></li>
  36.           <li><a href="">山西修缮一宋代建筑时发现罕见地宫</a></li>
  37.         </ul>
  38.         `;
  39.       // 获取路由的内容显示区元素
  40.       const routeView = document.querySelector(".route-view");
  41.       window.addEventListener("hashchange", show);
  42.        // window.addEventListener("load", show);
  43.       // DOMContentLoaded: 只要dom树创建完成就会触发,load:要等js执行完成和图片加载完成才触发
  44.       window.addEventListener("DOMContentLoaded", show);
  45.       function show() {
  46.         console.log(location.hash);
  47.         switch (location.hash) {
  48.           case "#/xw1":
  49.             routeView.innerHTML = xw1;
  50.             return;
  51.           case "#/xw2":
  52.             routeView.innerHTML = xw2;
  53.             return;
  54.          case "#/xw3":
  55.             routeView.innerHTML = xw3;
  56.             return;
  57.           default:
  58.             routeView.innerHTML = xw1;
  59.         }
  60.       }
  61.     </script>
  62.   </body>
  63. </html>

图示：
使用哈希（锚点）原生实现一个前端路由

二、使用vue路由模块实现一个前端路由

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>vue路由模块实现前端路由</title>
  7.     <!-- 加载vue框架 -->
  8.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9.     <!-- 路由模块 -->
  10.     <script src="vue-router-dev/dist/vue-router.js"></script>
  11.   </head>
  12.   <body>
  13.     <nav class="app">
  14.       <!-- 1.vue的路由是基于哈希实现,是用a标签的锚点来实现 -->
  15.       <router-link to="/xw1">军事</router-link>
  16.       <router-link to="/xw2">体育</router-link>
  17.       <router-link to="/xw3">文化</router-link>
  19.       <!-- 2路由到的资源显示区域 -->
  20.       <router-view></router-view>
  21.     </nav>
  23.     <script>
  24.       const xw1 = {
  25.         template: `
  26.                 <ul>
  27.                   <li><a href="">中国如何造隐轰?已曝光两个奇怪飞翼模型”</a></li>
  28.                   <li><a href="">歼20翼下外挂2枚PL15导弹试飞 将开启"野兽"模式(图)”</a></li>
  29.                   <li><a href="">美将军：除了中国海军明显增长外 我没看到重大变化”</a></li>
  30.                 </ul>
  31.               `,
  32.       };
  34.       const xw2 = {
  35.         template: `
  36.                 <ul>
  37.                   <li><a href="">库里26分勇士轻取马刺 吹杨38分卡皇27+26老鹰获连胜。</a></li>
  38.                   <li><a href="">连续5场最少丢109分!篮网死穴在这 帕金斯赛后炮轰欧文。</a></li>
  39.                   <li><a href="">塞克斯顿天神下凡加时连拿15分 过去一周NBA增11人阳性。</a></li>
  40.                 </ul>
  41.               `,
  42.       };
  44.       const xw3 = {
  45.         template: `
  46.                 <ul>
  47.                   <li><a href="">少林寺等中原名寺“闭门谢客”。</a></li>
  48.                   <li><a href="">陕西发现两座唐代纪年壁画墓 一墓主为“弼马温”。</a></li>
  49.                   <li><a href="">山西修缮一宋代建筑时发现罕见地宫。</a></li>
  50.                 </ul>
  51.               `,
  52.       };
  54.       // 1. 创建路由对象
  55.       const router = new VueRouter({
  56.         // 路由配置项
  57.         routes: [
  58.           // 每一个路由都是一个对象,每一个对象对应着一个路由地址
  59.           { path: "/xw1", component: xw1 },
  60.           { path: "/xw2", component: xw2 },
  61.           { path: "/xw3", component: xw3 },
  62.         ],
  63.       });
  65.       new Vue({
  66.         // 2. 注册路由
  67.         // router: router,
  68.         router,
  69.       }).$mount(".app");
  70.     </script>
  71.   </body>
  72. </html>

图示：
vue路由模块实现前端路由
配置文件

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