js实现回到上一页的功能,介绍三种方法,其中一种在新开的页面中也适用

话不多说,看例子

1、history.go()

可以回到,前进任意一步的页面,回到上一页,如下所示

// 回到上一页
window.history.go(-1);

// 回到下一页
window.history.go(1);

// 回到任意一页
widnow.history.go(+前进几页)

2、history.back()

// 回到上一页
history.back()

3、document.referrer

以上两种方式,基本上大家都清楚,但是我们常常会遇到的一个场景,并不适用.比如当你的页面点击一个按钮,开启了一个新的页面,这个时候如果让这个新的页面返回到之前的页面呢?那么就要用到document.referer这个属性了

// new page

// 获取上一页的url
const prevPageUrl = document.referrer;

// 跳转上一页
document.location,href = prevPageUrl;

如此,大部分的回到上一页的场景都可以无忧无虑的接需求了

  • 15
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 要在 Vue 在 web 页面上打开一个新的页面,你可以使用 HTML 的 `target` 属性或 JavaScript 的 `window.open` 函数。 1. 使用 `target` 属性: ``` <template> <a v-bind:href="url" target="_blank">Link</a> </template> <script> export default { data() { return { url: 'https://www.example.com' } } } </script> ``` 2. 使用 `window.open` 函数: ``` <template> <button @click="openWindow">Open Window</button> </template> <script> export default { methods: { openWindow() { window.open('https://www.example.com', '_blank'); } } } </script> ``` 在这两种方法,`_blank` 表示在新窗口打开链接。如果你希望在新标签页打开链接,可以将 `_blank` 替换为 `_blank`。 ### 回答2: 在Vue,可以通过使用<a>标签的target属性来实现在web页面上打开一个小的新页面。 首先,在Vue组件定义一个链接,并设置target属性为"_blank",这样点击该链接时就会在新的页面打开: ```html <template> <div> <a href="new_page.html" target="_blank">打开新页面</a> </div> </template> ``` 在上述代码,href指定了要打开的页面的路径,这里假设为new_page.html。 另外,如果想在点击链接时执行一些JavaScript代码,可以使用@click事件监听器来实现: ```html <template> <div> <a href="#" target="_blank" @click="openNewPage">打开新页面</a> </div> </template> <script> export default { methods: { openNewPage() { // 在这里添加打开新页面时的逻辑 window.open('new_page.html', '_blank'); } } } </script> ``` 在上述代码,@click="openNewPage"绑定了一个点击事件监听器,当点击链接时会触发openNewPage方法。在这个方法,调用window.open函数来打开一个新的页面,其第一个参数是要打开的页面的路径,第二个参数是打开方式("_blank"表示在新的页面打开)。 总之,通过上述方法,就可以在Vue在web页面上打开一个小的新页面。 ### 回答3: 在Vue,可以通过以下步骤在web页面上打开一个小的新页面: 1. 首先,在Vue项目的根目录下创建一个新的组件文件,例如`NewPage.vue`。 2. 在`NewPage.vue`文件定义新页面的内容和样式,可以使用Vue提供的各种组件、指令和数据绑定等功能。 3. 在需要打开新页面的按钮或链接的事件处理函数,使用`this.$router.push()`方法进行页面导航。 例如,可以在某个按钮的点击事件添加以下代码:`this.$router.push('/newpage')`。其,`/newpage`是你定义的新页面的路由路径。 4. 在Vue项目的路由配置文件(通常是`router/index.js`),添加对新页面的路由配置。 例如,可以在路由配置数组添加以下代码: ```javascript { path: '/newpage', name: 'NewPage', component: NewPage } ``` 其,`path`是访问新页面的路径,`name`是路由名称,`component`是对应的组件。 5. 保存并运行Vue项目,当点击按钮或链接时,就会打开一个新的小页面,显示`NewPage.vue`组件的内容。 总之,通过定义新页面的组件、导航到新页面的路由和处理相关事件,可以在Vue很方便地打开一个小的新页面

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值