vue-router 新窗口打开页面

最新推荐文章于 2024-06-13 11:09:32 发布
最新推荐文章于 2024-06-13 11:09:32 发布
阅读量3.7k 收藏 2
点赞数
分类专栏： 前端知识积累 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bocaidada/article/details/84989304
版权

方法一：vue2.0版本router-link支持target="_blank"属性（注：只有tag=“a"模式下 target=”_blank" 属性才会生效。）

<router-link tag="a" target="_blank" :to="{path:'/home',query:{id:'1'}}">打开新页面</router-link>

方法二：编程式导航，2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的

最低0.47元/天 解锁文章
bocaidada
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中在新窗口打开页面及Vue-router的使用
08-27
主要介绍了Vue中在新窗口打开页面 及 Vue-router的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-router为激活的路由设置样式操作
11-20
import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [/* your routes */], linkActiveClass: 'active' // 将 'active' 类设置为激活链接的类 }) ``` 如果你只想在...
【Vue】在新窗口中打开新页面
STATICHIT静砸的博客
11-16 2010
只需要在router-link中加上属性 target="_blank" 即可。vue是单页面应用，但是也可以实现在新窗口中打开新页面。
vue项目 this.$router.resolve作用
最新发布
ivan5277的博客
06-13 769
是一个强大的工具，它帮助开发者在不实际执行导航操作的前提下，根据Vue Router的配置动态生成目标路由的URL信息，适用于需要灵活控制导航流程或处理URL相关逻辑的场景。方法是一个非常有用的API，主要用于生成一个URL对象，这个对象包含了导航到指定路由所需的所有信息。比如，你可以指定路由名称、传递参数、查询字符串等，使得生成的URL能够满足复杂的导航需求。：该方法接受一个参数，通常是通往另一个路由的路径、名称或者一个描述目标位置的对象。（目标路由的信息对象）等属性的对象。（生成的URL字符串）、
vue-router跳转时打开新页面的两种方法
10-16
主要给大家介绍了关于vue-router跳转时打开新页面的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue-router具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vue-router 在新窗口打开页面
前端知识分享喵
05-04 3483
Vue 属于单页面应用，而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
vue-router跳转同时打开新界面
bumengbuzhangfu的博客
06-11 1634
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。
VUE2.0——打开新窗口
HarryHY的博客
11-30 481
gotonewsdel(e) { this.$store.commit("newsList", e); let routeData = this.$router.resolve({ name: "Newdel", params: { id: `${e.id}` }, }); window.open(routeData.href, "_blank"); },
window.open和vue router新开页面
鹤渺的星球
05-18 8636
打开新页面，并实现在新开页面中携带参数，可以使用 URLSearchParams 对象，进行参数的拼接和解析，vue router跳转新页面和window.open都可以，三种方式适应于不同场景。以上是几种常在开发中使用的几种跳转和新开页面的方式，关于router，在后续里更深入学习。
vue-router在新窗口打开页面
weixin_68966058的博客
09-04 6942
需要注意的是，router-link并不支持 target="_blank"属性，所以需要tag=“xxx”属性把router-link渲染成标签。有些时候需要在点击事件或者函数中实现页面跳转到新的界面，这时候就可以通过router.resolve()来实现。设计的渐进式框架，但是有时候在项目中也会出现新窗口打开页面的情况，此时，就需要用vue-router来解决。
vue-router在新窗口打开
weixin_38779534的博客
03-30 105
1.组件式导航，router-link 有一个target的属性 <router-link to="/b" target="_blank">新窗口</router-link> 2.编程式导航 <p @click="newPage">新窗口</p> methods:{ newPage(){ let routerUrl = this.$router.resolve({ path:'/b', query:{id:96}
vue-router新窗口打开页面
热门推荐
夏尔的小酒馆
09-21 1万+
vue、vue-Router是用来做单页面应用的，有的时候需要打开新页面用户体验才好，比如（点击图片进入放大模式）： 这时候打开新页面浏览这个订单详情很明显比较合适（杠精走开）。 总结了一下，Vue项目使用Vue-router打开新页面的时候一共有如下几种方法，分别适用不同的场景： 1.在template中，直接给它加上target='_blank'属性即可，反正最终它也会被解释为一个a标签 &amp;amp;...
vue 如何在新窗口打开页面
F02528的博客
11-06 4902
vue路由跳转打开一个新页面/窗口(还需要传参到新页面)
vue-router如何在新窗口打开页面
yihanzhi的博客
11-17 312
vue-router在新窗口打开页面的方法： let routeUrl = this.$router.resolve({ name: "detail", query: { id: item.id }, }); window.open(routeUrl.href, '_blank');
Vue中在新窗口打开页面
小馒头味的博客
10-10 2827
Vue中在新窗口打开页面 //post新窗口打开 // var newWin = window.open('','','height=500,width=1250,top=100,left=100,center=yes'), var newWin = window.open('_blank'), formStr = '', formStr = '<form style="vi...
Vue如何创建一个新页面以及相关路由配置详解
HHX_01的博客
01-10 5610
发现宝藏 1.路由配置语法格式 2.vue如何创建一个新页面 1.创建Vue组件 2.设计页面结构 3.配置Vue Router 4.更新导航菜单 5.测试导航 3.vue路由配置常见属性 1. path 2. name 3. component 4. meta 5. query 6. params
vue 后台管理系统如何生成动态菜单
qq_36437172的博客
11-08 2849
说起菜单的如何生成的，这个会与路由和权限的定义有关。因为路由涉及页面的跳转以及当前菜单项高亮选中等，可能后面还会涉及面包屑、标签页等功能的制作。目前不考虑权限，我们根据约定路由的配置，来生成动态菜单。 一、布局 对于后台管理系统，通常由 sider 菜单栏、header、footer 和 content 的内容组成。 <a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout> .
在<script setup lang='ts'> 下 如何用vue-router router.push 在新窗口打开页面
03-28
可以使用以下代码： ```typescript import { useRouter } from "vue-router"; const router = useRouter(); const openNewWindow = (path: string) => { window.open(router.resolve({ path }).href, "_blank"); }; // 在需要打开新窗口的地方调用 openNewWindow 方法 ``` 在这个例子中，我们首先导入 `useRouter` 方法来获取当前路由的实例。然后，我们定义了一个 `openNewWindow` 方法，该方法接受一个路径参数，该路径参数将用于打开新窗口。在方法内部，我们使用 `router.resolve` 方法来解析路径并获取完整的 URL。然后，我们将 URL 传递给 `window.open` 方法，并使用 `_blank` 参数来指示在新窗口中打开页面。最后，在需要打开新窗口的地方调用 `openNewWindow` 方法即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值