使用原生JavaScript开发时关于公用页面的疑问

问题遇到的现象和发生背景

由于部署环境问题，无法使用jQuery或者vue等三方框架，只能使用原生框架开发。
目前写了个侧边栏，如下图，目的是点击相应的文字可实现跳转。

  1. 使用vue是直接把侧边栏注册成全局组件，然后在其他页面直接就导入引用了，原生框架如何实现？（现在是在其他页面用iframe直接引入了侧边栏页面）
  2. 使用vue实现跳转可以用route-link，原生框架如何实现？试过直接给a标签的href添加路径，或者window.location.href=“ ”，但跳转到新页面后无法再跳转到其他页面（不清楚是不是我用iframe方式引入侧边栏的原因）
  3. 我现在的思路是这七八个页面全写完后，每个都再单独引入侧边栏，来实现跳转到其他页面的功能，这个思路对吗或者有没有其他好思路？

目前只写了侧边栏，其他页面新建了但还没内容 ，不清楚接下来的开发思路

img


//侧边栏是单个的html文件

img

用代码块功能插入代码，请勿粘贴截图

你的思路是没有问题的。
1、先把要跳转的页面做好。
2、左侧菜单排列好，添加点击事件，点击后，修改iframe的src就行了。

我用原生写了一个实例，你可以参考一下：

<!--
 * @Author: baiyf
 * @Date: 2022-01-04 22:54:57
 * @LastEditTime: 2022-12-02 21:32:40
 * @Description: file content
-->
<!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">
  <style>
    ul {
      cursor: pointer;
      width: 100px;
    }

    .content {
      display: flex;
      height: 100vh;
    }

    .right-content {
      width: calc(100% - 100px);
    }

    iframe {
      border: 0;
    }

  </style>
  <title>Document</title>
</head>

<body>
  <div class="content">
    <div class="left-content">
      <ul>
        <li onclick="a1()">点击</li>
        <li onclick="a2()">点击</li>
        <li>ccccc</li>
        <li>ddddd</li>
        <li>eeeee</li>
      </ul>
    </div>
    <div class="right-content">
      <iframe src="https://www.baidu.com/" id="src" width="100%" height="100%" iframeboder="0"></iframe>
    </div>
  </div>
</body>


<script>
  function a1() {
    let dom = document.getElementById("src");
    dom.src = "https://www.baidu.com/"
    console.log(dom)
  }

  function a2() {
    let dom = document.getElementById("src");
    dom.src = "https://time.geekbang.org/"
    console.log(dom)
  }

</script>

</html>

一点左边就右边展示不同的页面，页面用爱佛瑞木套起来

原生开发可以采用iframe来实现

iframe嵌入一个窗口，菜单项添加ID，点击切换iframe路径，后台管理挺多这么写的