html页面跳转返回不要刷新,javascript跳转与返回和刷新页面的实例代码

javascript中window.open()与window.location.href的区别

window.open(‘index.html') 表示新增一个窗口打开 index.html 这个页面,并不刷新

location.href(‘index.html') 表示在当前窗口重定向到新页面,打开并刷新 index.html 这个页面

window.location 是 window 对象的属性,用来替换当前页,也就是重新定位当前页

而window.open 是 window 对象的方法,是用来打开一个新窗口的函数

// 打开新页面

// 注意:有些浏览器的安全设置会将window.open()屏蔽,例如避免弹出广告窗

window.open('./index.html');

// 在原窗口打开新页面

window.location.href="./index.html";

window.open()详解

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')

参数解释: 三个参数

window.open 弹出新窗口的命令;  ‘page.html' 弹出窗口的文件名;  ‘newPage' 弹出窗口的名字(不是文件名),非必须,可用空'

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 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、付费专栏及课程。

余额充值