vue单页面应用的原理

最新推荐文章于 2026-05-24 07:43:40 发布

原创最新推荐文章于 2026-05-24 07:43:40 发布 · 6.1k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

单页面应用(SPA)利用浏览器的特性，避免页面重新加载，仅通过改变URL的哈希值实现页面内容切换。当哈希值变化时，通过监听onhashchange事件，获取新的哈希值，进而动态显示对应的组件，实现页面的无刷新更新。

通常的url 地址由什么构成呢：协议名域名端口号路径参数哈希值

比如：http://www.itcast.cn:80/home/index?name=zs#absdklfajdf

当哈希值改变（哈希值就是：#absdklfajdf），页面不会发生跳转，单页面应用就是利用了这一点：

单页面应用因为只有一个页面，所以页面不能发生跳转，但是，我们又需要根据url地址来展示不同的组件

这个时候，只能用哈希值来表示究竟要展示哪个组件了

单页面应用就是根据hash值来改的

给window注册onhashchange事件，当哈希值改变时通过location.hash就能获得相应的哈希值，然后就能跳到相应的页面：

<body>
    <div id="app">
      <component :is="currentPage"></component>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

      // 设计用户访问的规则
      // #/login  访问登录页  要给用户展示login组件
      // #/register 访问注册页  要给用户展示register组件
      // #/list 列表页 要给用户展示list组件

      Vue.component("login", {
        template: `<div>
          <h1>这是登录页</h1>
          <input type="text"><input type="text"><button>登录</button>
        </div>`
      });

      Vue.component("register", {
        template: `<div>
          <h1>这是注册页</h1>
          <input type="text"><input type="text"><input type="text"><button>注册</button>
        </div>`
      });

      Vue.component("list", {
        template: `<div>
          <h1>这是列表页</h1>
          <input type="text"><input type="text"><button>登录</button>
        </div>`
      });

      const vm = new Vue({
        el: "#app",
        data: {
          currentPage: "login"
        },
        created() {
          window.onhashchange = () => {
            this.goPage()
          };
        },
        methods: {
          goPage() {
            switch (location.hash) {
              case "#/login":
                this.currentPage = "login";
                break;
              case "#/register":
                this.currentPage = "register";
                break;
              case "#/list":
                this.currentPage = "list";
                break;
            }
          }
        }
      });
    </script>
  </body>

标签

#单页面应用