Nuxt.js 新窗口打开页面，不使用标签

已于 2023-04-19 11:14:22 修改
阅读量1.9k 收藏 1
点赞数 1
分类专栏： nuxt.js 文章标签： nuxt.js vue vue.js
于 2021-07-13 18:07:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43478592/article/details/118707469
版权

话不多说，一句代码解决：

window.open(url, "_blank");
长发卜及腰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
4.9-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》导航
DVTOP的博客
11-24 478
Nuxt3中导航比较简单，分为组件和编程方式。
使用Nuxt.js改造已有项目的方法
10-18
主要介绍了使用Nuxt.js改造已有项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nuxt.js之自动路由原理的实现方法
10-17
主要介绍了Nuxt.js之自动路由原理的实现方法，nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值，需要的朋友可以参考下
vue下使用nginx刷新页面404的问题解决
12-08
nginx 是一个代理的服务器。 出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。 解决方法： 在文件中的nginx.conf文件中修改，代码如下 server { listen YYYY; //自己设置的端口号 server_name 192.168.XXX.XXX; //在黑窗口下ipconifg后出现的IPv4地址复制 location /{ root E:/website_wap/dist/; //项目打包后的路径 in
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
01-21
路由跳转代码如下： HOME page NEWS page PLAY page 注意说明： to 前面有冒号“ : ” to 后面跟的是路径比如“/page/index”(可以跟字符串或对象)同上↑ 补充知识：nuxt的 nuxt
vue编程式路由实现新窗口打开
晴天有点孤单
08-10 2991
一. 标签实现新窗口打开： 官方文档中说 v-link 指令被 组件指令替代，且 不支持 target=”_blank” 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target=”_blank” 属性的(tag=”a”)，示例如下： <router-link tag="a" target="_blank" :to="{name:'searchG...
nuxt.js 跳转新页面
追风筝的博客
05-25 3893
nuxt.js 跳转新页面的方法 一般跳转方式的写法为： this.$router.push({ path: `/soft/${e.routerKey}`, }) 跳转新页面的方式1： let routeData = this.$router.resolve({ path: `/soft/${e.routerKey}`, }); window.open(routeData.href, '_blank'); 跳转新页面的方式2： window.open(`/soft/${e.r
nuxt-link跳转到当前页面，不同query参数值不加载
愤怒的苹果ext的博客
01-09 677
【代码】nuxt-link跳转到当前页面，不同query参数值不加载。
JS 浏览器打开新窗口, 非tab
热门推荐
MONKEYK
08-23 1万+
通常, 我们可以使用 window.open(url,"_blank") 或window.open(url,"_blank",option)打开一个新的窗口, 但如果浏览器设置了 用tab方式打开新窗口(许多浏览器都支持这功能), 这时候,再用以上两种方式则 总是在新tab中打开新的页面, 这可不是我们想要的.     要使用非tab方式打开的 JS如下:
nuxt怎么拿到window对象，解决方案
最新发布
橙-极纪元-cplvfx-JJY.Cheng
10-25 543
nuxt怎么拿到window对象，解决方案
Vue在 Nuxt.js 中重定向 404 页面的方法
12-03
要在页面之间使用路由，我们建议使用<nuxt> 标签。 正文 对我来说，Nuxt 是我所用过最好用的软件代码之一。它可以让我高效率地打造网站应用，无论这些应用是 SPA，还是 SSR，又或者是静态站点，这同时也是 JAM Stack...
【Node】Node.js 资源汇总推荐
DomCode
04-18 721
【导读】：Node.js 是一个开源、跨平台的，用于编写服务器和命令行的 JavaScript 运行时工具。awesome-nodejs 是sindresorhus发起维护的 Node.js 资源列表，内容包括：命令行工具、日志、调试、HTTP、构建工具、文件系统、模板、Web 框架、流程控制、文本、图片和数据校验等。
如何在 Nuxt.js 中配合 Element UI 使用微信开放标签 wx-open-subscribe 和 wx-open-launch-weapp
04-08 1200
微信把服务号的模板消息改成了订阅通知，而订阅通知是用开放标签 wx-open-subscribe 来订阅，而不管是在官方文档，还是在社区的帖子中，都只有普通 Vue 项目的用法，所以今天专门记录一下如何在 Nuxt.js 项目中，跟原有的 Element UI 一起搭配使用微信开放标签。 跟着官方文档的使用步骤走，因为开放标签使用步骤与微信 JS-SDK 类似，所以很多工作都不需要做，像 JS接口安全域名 之前已经配置过。然后引入 JS 文件，之前我用的是 1.4.0 版本的，现在换成 1.6.0 版本，这
router-link / nuxt-link 事件点击无效解决方法
weixin_43541909的博客
05-15 3764
有时候，需要在 router-link 上不止是跳转路由，还想要在跳转的同时进行一些操作，之前的方法是将 nuxt-link 换成普通的 div 进行 this.$router.push('/') 的方法跳转，觉得这样也可以，不影响其他问题，但是有一个问题存在，就是不能对选中的链接进行鼠标右键在新窗口打开页面，小小的问题，影响不大，如果用 v-on:click.native 方法就可以解决此类问题，既可以跳转，也可以在跳转的同时触发事件，做一些其他的事情。比如跳转时将触发的条件传给后台，分析用户行为。 .
window.open参数实例
III
03-22 1161
【1、最基本的弹出窗口代码】　　　　 　　　　window.open (page.html) 　　--> 　　 　　　　因为着是一段javascripts代码，所以它们应该放在标签和之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open (page.html) 用于控制弹出新的窗口page.html，如果page.
nuxt通过外部组件(页脚)跳转页面----切换tab页面
weixin_43915673的博客
06-17 1018
1、 <div v-for="i in item" @click="onRoutePush(i)">{{ i.label }}</div> 传入整个i，有可能是多种值 const footer=[{ label: '观察', value: 'resources', children: [ { label: '报告', value: 'resources', type: 'insight' }, { label: '资讯', value: '
nuxt页面跳转_Nuxt.js的路由跳转操作(页面跳转nuxt-link)
weixin_39928768的博客
12-21 4804
Nuxt.js的路由跳转操作(页面跳转nuxt-link)路由跳转代码如下：HOME pageNEWS pagePLAY page注意说明：to 前面有冒号“ : ”to 后面跟的是路径比如“/page/index”(可以跟字符串或对象)同上↑补充知识：nuxt的 nuxt-link 有个坑如果你跟着nuxt的案例走，记住 ，所以目录 比如 PAGES 目录 你最好小写 pages 所有目录都小写...
nuxt.js中使用vue-cropper实现图片裁剪
zhanghaoran
04-08 4294
最近我司一项目，在个人中心页面上需用户上传个性传封面图（类似知乎个人主页上部），用户上传图片大小不一，且封面图大小为1000px*240px;这就需要在用户上传的时候对图片进行合适大小裁剪。 大概思路： 用户上传图片时 判断图片尺寸大小，宽高不能小于1200px240；小于这个尺寸将无法完美裁剪。 将图片转化为base64格式，即时回显图片和不浪费服务器资源。 这两步完成后，将进入到vue-c...
nuxt.js 配置服务端error页面
08-22
### 回答1： 可以在 nuxt.config.js 中配置 error 属性来设置服务端错误页面。例如： ``` module.exports = { // ... error: { statusCode: 500, message: '服务器出错了，请稍后再试！' } } ``` 其中，statusCode 表示 HTTP 状态码，message 表示错误信息。你可以根据自己的需求来设置。 ### 回答2： 要配置 Nuxt.js 的服务端错误页面，需要按照以下步骤进行操作： 1. 首先，打开 Nuxt.js 项目中的 `nuxt.config.js` 文件。 2. 在该文件中，找到 `router` 配置项，并修改它。例如，将其改为如下代码： ``` router: { middleware: ['error'] } ``` 这样可以指定一个中间件（在此例中为名为 "error" 的中间件）来处理错误页面。 3. 在项目根目录下创建一个新的文件夹，并命名为 `middleware`。进入该文件夹，并新建一个名为 `error.js` 的文件。 4. 在 `error.js` 文件中，可以定义自定义的错误处理逻辑。以下是一个简单的例子： ```javascript export default function (context) { const { res, error } = context res.statusCode = error.statusCode || 500 res.end('服务器错误') } ``` 上述代码中，我们根据错误的状态码（`statusCode`）来设置响应的状态码，并通过 `res.end()` 方法返回自定义的错误信息。 5. 最后，在 `nuxt.config.js` 文件中，可以使用 `modules` 配置项来添加一些 Nuxt.js 的扩展模块，以实现更高级的错误页面定制。例如，安装并添加 `@nuxtjs/axios` 模块，可以在项目中使用更丰富的错误页面定制功能。 总之，通过按照上述步骤配置 Nuxt.js 的服务端错误页面，可以根据自己的需求定制并展示合适的错误信息。 ### 回答3： 在Nuxt.js中配置服务端的错误页面可以通过自定义错误页面、中间件以及服务器选项来实现。 1. 自定义错误页面： 首先，可以在Nuxt.js项目的根目录下创建一个`layouts`文件夹，并在该文件夹下创建一个`error.vue`文件。这个文件将作为错误页面的模板。在`error.vue`中可以自定义错误页面的样式和内容，例如可以显示错误的类型和具体的错误信息。 2. 中间件： Nuxt.js提供了中间件机制，通过使用中间件可以在服务端对错误进行处理和控制。可以在项目的根目录下创建一个`middleware`文件夹，并在该文件夹下创建一个`error.js`文件。在`error.js`中可以编写错误处理的逻辑，例如可以根据错误的状态码来进行特定的处理。 3. 服务器选项： Nuxt.js的`nuxt.config.js`文件中可以配置服务器的选项。可以在该文件中添加`server`选项来配置服务端的错误页面。例如可以设置`error`属性来指定自定义的错误页面的路径。 示例: ```js // nuxt.config.js module.exports = { server: { error: '~/layouts/error.vue' } } ``` 通过以上的配置，当服务端报错时，Nuxt.js会使用自定义的错误页面进行展示。 总结：Nuxt.js配置服务端错误页面，可以通过自定义错误页面、中间件以及服务器选项来实现。这样可以将错误信息展示给用户，并且可以根据需要进行特定的错误处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值