router vue 页签文字_vueRouter点击打开新页签

一、vue 路由使用

vue是单页面SPA，一般我们使用vue-router 设定路由进行页面跳转的时候，都是直接覆盖当前页面。比如，在a页面中有如下超链接

子任务详情

直接这样设置的话，会在当前页面直接修改url,覆盖原始页面。

我们大多数情况下也是很希望这样的，但是有时候也希望不覆盖当前页面，直接打开一个新页签，类似于详情

二、vue项目中实现链接打开新页签

那么链接打开新页面这种情况下如何实现呢？分为两种情形：

情形一：纯链接跳转打开新页签

可能你会直接想因为经过解析会以超链接的html方式展示，那么直接在其中按照超链接a的方式直接设定traget不就行了么，也就是下面的代码

子任务详情

经过试验，这种方式是可以在新页面打开的，但是无法带查询参数，只能是纯链接的方式跳转。所以如果url中带查询参数这种方式是不可以的，不建议这样用。

那么如何带查询参数的并且需要新打开页面如何实现呢？请继续看下面：

情形二：带查询参数的页面跳转打开新页签

可以采用编程式的方式实现，代码如下：

const {href} = this.$router.resolve({

name: 'foo',

query: {

bar

}

})

window.open(href, '_blank')

可以使用上面的方式，在query中书写查询对象，然后使用window.open()方法打开即可。

vue 2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。

router vue 页签文字_vueRouter点击打开新页签相关推荐

Jquery UI Tabs 动态添加页签，并跳转到新页签
需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添加页签(添加多个) 2.tabs动态添加页签后,需要跳转到新添加的页签查找tabs api以及tabs的源码后,发现tabs没有直接实 ...
vue 按钮点击打开新页面_Vue中在新窗口打开页面及Vue-router的使用
背景在开发提分加项目的过程中,遇到了点击下拉菜单时在新窗口中打开页面,由于之前一直做的是单页面应用,没有碰到过类似的需求,于是上网搜了一下解决办法,也再次系统地温习了一下vue-router. 解决 ...
router vue 页签文字_vue-router实现tab标签页（单页面）详解
vue-router 是 Vue.js 官方的路由插件,适合用于构建标签页应用.Vue 的标签页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,vue-router 会把各个组件 ...
router vue 多个路径_vue-router 路由总结
vue.js 路由基础安装vue - router 直接下载 / CDN Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指向在 NPM 发布的最新版本.你也可以像 htt ...
router vue 多个路径_vue-router 路径问题
这是因为服务端接管路由,去访问/user/id这个地方,但是实际上应该让服务器把你带到index.html这里,然后vue-router通过分析路径确定你是要访问vue-router的路由,然后给你展 ...
vue 点击打开新窗口
<div @click="openNew" /> methods: { openNew() {const routes = this.$router.resolve({ ...
vue 按钮点击打开新页面_vue路由打开新窗口
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被组件指令替代,且不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2 ...
html中a标签空白页,a标签href设置javascript:void(0)，在chrome点击打开新的空白页
需求是:点击链接,根据权限或后台数据来动态判断是否可跳转到新页面开发测试时,在两台性能较差的电脑上,及时设置了javascript:void(0),chrome仍会打开新的空白页. 排查结果是a标签 ...
vue-router点击打开新的标签页的方法
只需要在router-link中加入target="_blank"即可在新的页面打开标签! <router-link:to="{name: 'TrvalPlan', ...

router vue 页签文字_vueRouter点击打开新页签

router vue 页签文字_vueRouter点击打开新页签相关推荐

最新文章

热门文章