两个页面跳转不刷新

两个页面跳转不刷新:一般用在购物时,返回还希望我刚才选的商品还在。

做法就是把第二个页面当作是iframe的框架引进第一个页面。

然后在第二个页面返回的时候也一个函数,让他返回第一个页面。


第一个页面A.html:

<iframe src="B.html" autofull   frameborder="0"></iframe>

其他的html内容


第二个页面B.html

 $("#backhome").click(function(){

       window.top.closeiframe();      // 点击按钮返回,执行他的父类页面的closeiframe函数

   });


如果你是mui写的,那么要重写他的mui.back函数。上面的就写成

mui.back=function(){

  window.top.closeiframe(); 

}


这样你就需要在A.html里面写一个对应的

closeiframe function(){

   $("iframe").show();

}

在 Vue 中实现页面跳转刷新同样可以使用 AJAX 技术,但是可以更加方便地使用 Vue Router 来实现。 Vue Router 是 Vue.js 官方的路由管理器,它可以帮助我们实现单页应用(SPA)的路由管理。在 Vue Router 中,每个路由都映射到一个组件上,当用户访问该路由,会显示该组件的内容,而不需要重新加载整个页面。 具体实现步骤如下: 1. 安装 Vue Router,并创建一个 Vue Router 实例。 2. 在 Vue Router 实例中定义路由,包括路径和组件。 3. 在 Vue 实例中引入 Vue Router 实例,并将其配置为根实例的路由管理器。 4. 在组件中使用路由链接进行页面跳转。 例如,可以使用如下代码实现页面跳转刷新: ```javascript // main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ mode: 'history', routes }) new Vue({ router, render: h => h(App), }).$mount('#app') ``` 其中,通过 import 引入了 Vue 和 Vue Router,定义了两个路由,分别对应路径 '/' 和 '/about',并创建了一个 Vue Router 实例。在根实例中将该实例配置为路由管理器,并将其传递给 App 组件。在组件中可以使用 \<router-link> 组件进行页面跳转: ```html <!-- Home.vue --> <template> <div> <h1>Home Page</h1> <router-link to="/about">Go to About Page</router-link> </div> </template> <!-- About.vue --> <template> <div> <h1>About Page</h1> <router-link to="/">Go to Home Page</router-link> </div> </template> ``` 当用户点击页面上的链接,Vue Router 会通过 AJAX 技术实现页面跳转,而不需要刷新整个页面。注意,需要将 mode 设置为 'history',否则链接中会包含 '#' 符号。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值