路由知识、基于锚点的哈希模式路由、使用vue路由模块路由、用历史记录对象实现前端路由模式

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

1.路由是什么

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

---

2.路由的分类

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

---

3.前端路由

3.1 哈希模式: 监听 url 中的#后面的内容变化（锚点）

3.1.1 锚点的作用

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

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

  <nav>
    <a href="#/list1">国际新闻</a>
    <a href="#/list2">娱乐新闻</a>
  </nav>x
  <!-- 该区域专用于显示路由的内容 -->
  <div class="route-view"></div>
  <script>
    let list1 = `
        <ul>
          <li>news-list1-1</li>
          <li>news-list1-2</li>
          <li>news-list1-3</li>
        </ul>
        `;
    let list2 = `
        <ul>
          <li>news-list2-1</a></li>
          <li>news-list2-2</a></li>
          <li>news-list2-3</a></li>
        </ul>
        `;
    // 获取路由的内容显示区元素
    const routeView = document.querySelector(".route-view");
    //添加锚点触发事件
    window.addEventListener("hashchange", show);
    //页面加载后初始化显示的数据
    // window.addEventListener("load", show);//方式一
    window.addEventListener("DOMContentLoaded", show);//方式二 
    //两者之间区别：DOMContentLoaded: 只要dom树创建完成就会触发；load:要等js执行完成和图片加载完成才触发
    function show() {
      console.log(location.hash);
      switch (location.hash) {
        case "#/list1":
          routeView.innerHTML = list1;
          return;
        case "#/list2":
          routeView.innerHTML = list2;
          return;
        default:
          routeView.innerHTML = list1;
      }
    }
  </script>

3.1.23 使用vue路由模块的路由

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

<!-- 加载vue框架 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 路由模块（下载地址：https://github.com/vuejs/vue-router） -->
  <script src="vue-router-dev/dist/vue-router.js"></script>
<nav class="app">
    <router-link to="/list1">国内新闻</router-link>
    <router-link to="/list2">娱乐新闻</router-link>
    <!-- 路由到的资源显示区域 -->
    <router-view></router-view>
</nav>
<script>
    const list1 = {
      template: `
                <ul>
                  <li>news-list1-1</li>
                  <li>news-list1-2</li>
                  <li>news-list1-3</li>
                </ul>
              `,
    };
    const list2 = {
      template: `
                <ul>
                  <li>news-list2-1</a></li>
                  <li>news-list2-2</a></li>
                  <li>news-list2-3</a></li>
                </ul>
              `,
    };
    // 1. 创建路由对象
    const router = new VueRouter({
      // 路由配置项
      routes: [
        // 每一个路由都是一个对象,每一个对象对应着一个路由地址
        { path: "/list1", component: list1 },
        { path: "/list2", component: list2 },
      ],
    });
    new Vue({
      el: ".app",
      // 2. 注册路由
      router: router,
    });
</script>

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

3.2 历史记录: window.history对象,监听popstate事件

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

<nav>
  <a href="/list1">国际新闻</a>
  <a href="/list2">娱乐新闻</a>
</nav>
<div class="router-view"></div>
<script>
const list1 = `
  <ul>
    <li>news-list1-1</li>
    <li>news-list1-2</li>
    <li>news-list1-3</li>
  </ul>
  `;
const list2 = `
  <ul>
    <li>news-list2-1</a></li>
    <li>news-list2-2</a></li>
    <li>news-list2-3</a></li>
  </ul>
  `;
const routeView = document.querySelector(".router-view");
// 获取到所有a标签的href
const links = document.querySelectorAll("nav a[href]");
links.forEach(
  (link) =>
    (link.onclick = (ev) => {
      // 禁用掉a标签的默认行为
      ev.preventDefault();
      // history.pushState(状态对象,标题,url) 设置浏览器地址
      history.pushState(null, "", link.href);
      // 手动更新了url,但是popstate事件监听不到这个变化,需要调用一个函数
      show();
    })
);
window.addEventListener("popstate", show);//监听浏览器地址变化
function show() {
  console.log(location.pathname);
  switch (location.pathname) {
    case "/list1":
      routeView.innerHTML = list1;
      return;
    case "/list2":
      routeView.innerHTML = list2;
      return;
    default:
      routeView.innerHTML = list1;
  }
}
</script>

---

4. SPA

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