程序员经验分享-hwhale

使用 Vuetify v-btn 和 Vue 路由器在新窗口中打开链接

2024-01-22

Vue Router 的最新版本允许在新选项卡中打开链接，例如下列

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

正确呈现<a target="_blank">.

然而，这似乎不适用于 Vuetifyv-btn，它支持路由器路径，例如如果我们想使用图标。

<v-btn icon :to="{ name: 'fooRoute'}" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

尽管组件呈现<a>，没有target="_blank"属性。我们怎样才能做到这一点？


尝试以下代码片段

<v-btn icon href="/fooRoute" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

Vuetify 按钮 API https://i.stack.imgur.com/fxXCu.png

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs

vuejs2

VueRouter

vuetifyjs

使用 Vuetify v-btn 和 Vue 路由器在新窗口中打开链接 的相关文章

  • 使用 EventBus 通过单文件组件传递 Vue js 搜索过滤器功能

    我有以下组件 components SearchBlogs vue搜索要过滤的组件blog title and blog description components BlogList vue在这里我列出了所有博客项目 搜索博客 vue

  • 在 ES6 中使用 import 和 require 的正确方法是什么？

    关于 import 和 require 及其差异有多个问题 像这些 JavaScript 中的 import 和 require 有什么区别 https stackoverflow com questions 51373933 what i

  • 如何在Vue中提交表单，重定向到新路由并传递参数？

    我正在使用 Nuxt 和 Vue 我正在尝试提交表单 将用户重定向到包含提交的参数的新路由 发送 API 请求以获取一些数据 然后渲染该数据 我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现此目的 首先

  • Vue 3：使用渲染函数将所有项目包装在一个自定义组件中

    我正在尝试建立自己的sortable成分 我想将项目列表传递到它的默认插槽 然后 可排序组件应该用自定义包装所有传递的项目v draggable成分

  • Vue.js 更改 {{ }} 标签

    我想改变 something by 在 Vue js 中 我怎样才能实现这一点 这可能吗 我在 AngularJS 中寻找的等效项 var app angular module app function interpolateProvide

  • 如何在 Atom 中启用 .vue 文件的语法突出显示？

    我开始使用 Vue js 我遇到的第一个问题是我的 IDE Atom 无法美化我的 vue 文件 这一切都只是白色的文字 如何让 Atom 正确突出显示 vue 文件 语言 vue https atom io packages langua

  • 如何在 vuex nuxt 中获取嵌套 getter

    i have store index js像这样 new Vuex Store modules nav namespaced true modules message namespaced true state count 0 conver

  • 如何同时模拟Pinia和vue-i18n？

    我正在使用 Vue 3 的 Composition API 如下所示 store ts import ref Ref from vue import defineStore from pinia export const useStore

  • 不使用Vue可以使用Vuex吗？ （Vuex 服务器端？）

    Vuex 抱怨如果不调用 Vue use Vuex 就无法创建新的 store 实例 虽然这通常没问题 但我正在摆弄使用同一商店编写后端 前端的想法 有人知道答案吗 Thanks TL DR 你可以在 Node 中完美使用 Vuex 无需浏

  • 个人Vue 3组件包缺少模板或渲染函数

    我最近将自己的 Vue 3 组件上传到 NPM 以供其他人使用 当在其他项目中使用它时 它会发出以下警告 Vue warn Component is missing template or render function at

  • 在 Vue.js 中隐藏 div onclick

    以下 jQuery 的 Vue js 等价物是什么 btn click function hideMe hide jQuery 开箱即用 而 Vue js 则不然 要初始化 Vue js 组件或应用程序 您必须将该组件及其数据绑定到模板内的

  • 左侧导航菜单上部隐藏

    当滚动到页面最底部时 左侧导航菜单的顶部将被隐藏 The image before scrolling is shown below 滚动后的效果如下图 我不确定此问题的确切原因 因此我将不胜感激任何有关识别和解决该问题的建议或帮助 为了确

  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default

  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle

  • Vuejs 2：去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

  • vue js中的process.env.BASE_URL是什么？

    当我使用 vue cli 安装 vue 时手动选择预设 我偶然发现了 process env BASE URL 我试图在互联网上找到它 但无济于事 我找不到任何像样的解释 这是代码 const router new VueRouter mo

  • vuex-router-sync 是做什么用的？

    据我所知vuex router sync只是为了同步route与vuex store并且开发者可以访问route如下 store state route path store state route params 不过我也能应付route

  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建

  • 如何获取 vuejs 组件单元测试中定义的“this”变量

    我正在尝试在 npm 脚本中使用 mocha webpack 来测试 vuejs 组件 我在测试中像这样嘲笑 vuex 商店 const vm new Vue template div div

  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob

随机推荐

热门标签