资讯专栏INFORMATION COLUMN

vue-router如何跳转时打开新页面

xialong / 640人阅读

摘要:我们常用的是和但是以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用如下何时成为大佬

最近还是在痛苦的挣扎中
挣扎吧

记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1、标签实现新窗口打开

官方文档中说 v-link 指令被 组件指令替代,且 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 target="_blank" 属性的(tag="a"),如下:

新页面打开home页
2、编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转,那么可以借助router的示例方法,通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后,这种方式就不支持新窗口打开的属性了,这个时候就需要使用this.$router.resolve,如下:

seeShare(){
     let routeUrl = this.$router.resolve({
          path: "/share",
          query: {id:96}
     });
     window.open(routeUrl.href, "_blank");
}

何时成为大佬

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106085.html

相关文章

  • Vue中的验证登录状态

    摘要:用存储用户路由守卫路由中设置的字段就在当中每次跳转的路径登录状态下访问页面会跳到如果没有访问任何页面。一个简单的保存登录状态的小。 Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首...

    draveness 评论0 收藏0
  • 一篇搞定vue-Router导航守卫

    摘要:如果我们不掉用守卫中的,迭代器的肯定并不会执行,守卫的迭代就停止了,守卫堵塞并不会执行完毕,也就不会由后面的更细路由操作了。 vue-router导航守卫 在本期文章中,我将为大家梳理弄明白以下几个事情, 1:导航守卫的执行顺序是怎么样的? 2:导航守卫中的next的用处? 3:为什么afterEach守卫没有next? 4:beforeEach是否可以叠加? 5:路由跳转经历了哪几部...

    不知名网友 评论0 收藏0
  • Vue2.0实用笔记

    摘要:实例中,可追踪数据发生变化时,会开启一个队列,把变化记录其中,在下一次事件循环前,进行去重优化,然后重新渲染。最早通过实现了这一需求,通过事件可监听的变化,实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果 单组件()v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

    draveness 评论0 收藏0
  • Vue2.0实用笔记

    摘要:实例中,可追踪数据发生变化时,会开启一个队列,把变化记录其中,在下一次事件循环前,进行去重优化,然后重新渲染。最早通过实现了这一需求,通过事件可监听的变化,实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果 单组件()v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

    maochunguang 评论0 收藏0
  • Vue2.0实用笔记

    摘要:实例中,可追踪数据发生变化时,会开启一个队列,把变化记录其中,在下一次事件循环前,进行去重优化,然后重新渲染。最早通过实现了这一需求,通过事件可监听的变化,实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果 单组件()v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

    JowayYoung 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<