• vue-router

    项目仓库地址： https://github.com/chenfenbgin/vue3-router

    一、路由

    在这里插入图片描述

    1、路由 - 路径修改原理

    注：底层：路径和组件之间的映射关系（前端路由维护）。
    路径：http://www.baidu.com/home 与 http://www.baidu.com/about，当我们路径改变是，不希望去静态服务器重新请求资源,只是组件之间的切换而已，可以使用：
    1、路径写成hash值，#/home -> #/about， 用的其实是锚点（href属性）
    2、history模式

    方式一：hash修改路径

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a href="#/home">home</a>
      <a href="#/about">about</a>

      <div class="content">Default</div>
    </div>

    <script>
      const contentEl = document.querySelector(".content");
      // hashchange：监听浏览器hash值的改变
      window.addEventListener("hashchange", () => {
        switch (location.hash) {
          case "#/home":
            contentEl.innerHTML = "Home";
            break;
          case "#/about":
            contentEl.innerHTML = "About";
            break;
          default:
            contentEl.innerHTML = "Default";
        }
      });
    </script>
  </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    方式二：history修改路径，需要监听浏览器路由修改，但是不让其刷新
    在这里插入图片描述

    注： http://127.0.0.1:5500/history-demo.html 点击home到 http://127.0.0.1:5500/home, 浏览器是会去在请求一次资源的，浏览器是无法解析这个路径的。

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a href="/home">home</a>
      <a href="/about">about</a>

      <div class="content">Default</div>
    </div>

    <script>
      // 1、获取router-view
      const contentEl = document.querySelector(".content");

      // 4、执行设置页面操作
      const changeContent = () => {
        console.log("-----");
        switch (location.pathname) {
          case "/home":
            contentEl.innerHTML = "Home";
            break;
          case "/about":
            contentEl.innerHTML = "About";
            break;
          default:
            contentEl.innerHTML = "Default";
        }
      };

      // 2、监听所有a元素
      const aEls = document.getElementsByTagName("a");
      // 获取a元素，使用of进行遍历，可以直接拿到元素本身
      for (let aEl of aEls) {
        aEl.addEventListener("click", (e) => {
          // 阻止a元素默认行为
          e.preventDefault();

          const href = aEl.getAttribute("href");
          // history.pushState({}, "", href);
          // 这里是不会再去请求资源的
          // 3、监听pushState\replaceState操作
          history.replaceState({}, "", href);

          changeContent();
        });
      }

      window.addEventListener("popstate", changeContent);
    </script>
  </body>
</html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    二、vue-router

    注：维护的，也是组件和路径之间的映射关系。

    在这里插入图片描述

    1、vue-router的基本使用

    在这里插入图片描述

    2、路由的默认路径

    在这里插入图片描述

    3、history模式

    在这里插入图片描述

    4、router-link

    注： router-link标签如果设置replace属性，不允许用户返回上一次的页面。

    在这里插入图片描述

    5、路由懒加载

    在这里插入图片描述
    在这里插入图片描述

    6、路由其他属性

    在这里插入图片描述

    7、动态路由基本匹配 / 获取参数

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    8、匹配不存在的路径

    在这里插入图片描述

    在这里插入图片描述

    9、路由嵌套

    在这里插入图片描述

    10、编程式导航

      // 使用methods方式进行路由跳转
  // methods: {
  //   jumpToAbout() {
  //     // router
  //     this.$router.push("/about")
  //   }
  // },
  // setup中的写法
  setup() {
    const router = useRouter();

    const jumpToAbout = () => {
       router.push("/about")
       router.push({
         path: "/about",
         query: {
           name: "why",
           age: 18
         }
       })
      // router.replace("/about")
    };

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    11、router-link、router-view/v-slot

    注：我们在使用router-link 跟 router-view组件时，其实是：
    1、app.use(router)
    2、router.install = function(){
    //全局注册
    app.component(‘router-link’, {})
    app.component(‘router-link’, {})
    }

    注： 3.x之前，<router-link>有个属性tag, 决定以后出来要渲染出来什么元素。默认渲染出来的是a元素；4.x之后没有tag元素了。可以通过插槽的方式
    在这里插入图片描述

    在这里插入图片描述

    12、动态添加路由

    账号 -> 角色 -> 权限 -> 不同的路由

    在这里插入图片描述

    在这里插入图片描述

    13、导航守卫

    在这里插入图片描述

    在这里插入图片描述

  • 相关阅读:
    如何使用uiautomation开发一套自动朋友圈自动点赞的桌面应用
    AVS3：双向梯度修正BGC
    centos软件设置开机启动的方式
    Python：每日一题之顺子日期
    设计模式之【适配器模式】
    Git Rebase-提交整洁之道
    浅谈三点建议为所有已经毕业和终将毕业的同学
    离散数学：图的基本概念
    二进制安装Kubernetes（k8s）v1.29.2
    腾讯安全列入Gartner《中国托管检测和响应服务市场指南》
  • 原文地址：https://blog.csdn.net/Anna_Liqi/article/details/125585941