js怎么让两个页面来回切换

通过JavaScript实现两个页面的来回切换，可以使用：window.location.href、iframe、单页应用框架。其中，使用window.location.href来实现页面跳转是一种简单而常见的方法。

一、使用window.location.href

window.location.href 是最基础的页面跳转方法。它可以在当前窗口中加载新页面，从而实现页面切换。

// 跳转到页面A
window.location.href = 'pageA.html';
// 跳转到页面B
window.location.href = 'pageB.html';

二、使用iframe实现页面切换

iframe 标签可以在一个网页中嵌入另一个网页，从而实现页面切换。通过JavaScript操作iframe的src属性来动态加载不同的页面。

<!-- HTML代码 -->
<iframe id="contentFrame" src="pageA.html" width="100%" height="500px"></iframe>
<button onclick="switchToPageA()">切换到页面A</button>
<button onclick="switchToPageB()">切换到页面B</button>
<script>
// JavaScript代码
function switchToPageA() {
    document.getElementById('contentFrame').src = 'pageA.html';
}
function switchToPageB() {
    document.getElementById('contentFrame').src = 'pageB.html';
}
</script>

三、使用单页应用框架

单页应用（SPA）框架如React、Vue.js和Angular可以通过组件和路由实现页面切换，而无需真正加载新页面。这种方法不仅能提高性能，还能提供更好的用户体验。

使用Vue.js实现页面切换

安装Vue和Vue Router

npm install vue vue-router

创建Vue组件

// PageA.vue
<template>
  <div>这是页面A</div>
</template>
<script>
export default {
  name: 'PageA'
}
</script>
// PageB.vue
<template>
  <div>这是页面B</div>
</template>
<script>
export default {
  name: 'PageB'
}
</script>

设置路由

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import PageA from './components/PageA.vue';
import PageB from './components/PageB.vue';
Vue.use(Router);
export default new Router({
  routes: [
    { path: '/pageA', component: PageA },
    { path: '/pageB', component: PageB }
  ]
});

初始化Vue实例

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

在App.vue中使用路由

// App.vue
<template>
  <div id="app">
    <router-link to="/pageA">页面A</router-link>
    <router-link to="/pageB">页面B</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

通过以上步骤，使用Vue.js可以轻松实现两个页面的来回切换。

四、总结

通过JavaScript实现两个页面的来回切换有多种方法，包括window.location.href、iframe、单页应用框架等。具体选择哪种方法，取决于项目的复杂度和具体需求。使用window.location.href 是最基础的实现方法，iframe 则适用于嵌套页面的情况，而单页应用框架 则适用于更复杂的前端项目。为了更好的团队协作和项目管理，可以考虑使用研发项目管理系统PingCode 和 通用项目协作软件Worktile。