概述

toB系统推荐hash，toC可考虑history,需要后端支持

路由模式

hash(默认)
history(手动配置+后端支持)

hash模式

核心：window.onhashchange

特点：

hash变化会触发网页跳转，即浏览器前进后退，但浏览器不会刷新

hash变化不会刷新页面，spa必须特点
hash永远不会提交到server端

      // hash变化方式：
      // 1.js修改url
      // 2.手动修改url hash值
      // 3.浏览器前进后退

      //   页面初次加载获取hash
      document.addEventListener("DOMContentLoaded", () => {
        console.log("页面初次加载 hash:", location.hash);
      });

      //   监听hash变化
      window.onhashchange = (event) => {
        console.log("old url", event.oldURL);
        console.log("new url", event.newURL);
        console.log("hash:", location.hash);
      };

      //   js 修改 url
      document.getElementById("btn1").addEventListener("click", () => {
        location.hash = "#/user";
      });

history模式

核心：history.pushState改变路由path window.onpopstate监听path变化渲染相应组件

特点：url规范的路由，前端跳转，不刷新页面，需要后端支持

      // 页面初次加载获取path
      document.addEventListener("DOMContentLoaded", () => {
        console.log("初次path", location.pathname);
      });
      //   打开新路由  pushState()不会刷新页面
      document.getElementById("btn1").addEventListener("click", () => {
        const state = { name: "page1" };
        console.log("切换路由到page1");
        history.pushState(state, "", "page1");
      });

      //   监听浏览器前进后退,然后触发组件渲染
      window.onpopstate = (e) => {
        console.log("onpopstate", event.state, location.pathname);
      };

    //   后端无论访问什么路由只需要返回主文件index.html,前端通过pushState方式触发路由切换，监听到路由切换再渲染对应的组件。

vue2-router- js实现路由

概述

hash模式

history模式