vue 跳转页面打开浏览器新窗口或者打开新标签

vue 跳转页面打开浏览器新窗口或者打开新标签

打开浏览器新窗口方法:

openNewWindow () {
   // 打开新窗口
   let left = ((window.screen.width / 2) - 180) / 2   // 新窗口居中
   let width = (window.screen.width / 2) + 180        // 新窗口的宽度
   // 新窗口要设置的参数
   let params = `height=${window.screen.height},width=${width},top=0,left=${left},toolbar=no,menubar=no,scrollbars=no,resizable=yes,location=yes,status=no`
   window.open(`/testPage/${this.title}/${this.id}/${this.type}/${this.date}`,'_blank',params)},
    
   // 注意:路由地址的 path 必须配置成以下这样,有几个参数就配置几个参数
   // path : '/testPage/:title/:id/:type/:date'

打开新标签页方法:

 openNewTab () {
    // 打开新标签
    let routeData = this.$router.resolve(({
    path: '/testPage', // path 要跳转的路由地址
    // query 要传递的参数
    query: { 
       title: this.title,
       id: this.id,
       type: this.type,
       date: this.date,
     }
    }))
    window.open(routeData.href,'_blank')
 },
  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,点击按钮跳转页面可以通过以下两种方式实现: 1. 在methods中使用$router.push()方法进行跳转: ```javascript goAddPage() { this.$router.push('/将要跳转的路由名称'); } ``` 这种方式会将目标路由添加到浏览器的访问历史记录中。 2. 在methods中使用$router.replace()方法进行跳转: ```javascript goAddPage() { this.$router.replace('/将要跳转的路由名称'); } ``` 这种方式会替换当前的路由记录,而不会添加的访问记录。 关于公共路由配置,在Vue项目中的路由文件(router.js)中,可以通过constantRoutes来配置公共路由。在constantRoutes数组里添加需要的路由配置。例如: ```javascript import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout' // 导入布局组件 Vue.use(Router) export const constantRoutes = [ { path: '/redirect', // 跳转路由 component: Layout, hidden: true, children: [ { path: '/redirect/:path(.*)', component: resolve => require(['@/views/redirect'], resolve) } ] }, { path: '/login', // 登录路由 component: resolve => require(['@/views/login'], resolve), hidden: true }, // 其他路由配置 ] export default new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: constantRoutes }) ``` 以上是一个简单的公共路由配置示例,你可以根据需要进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue点击按钮跳转页面](https://blog.csdn.net/qq_24441205/article/details/123069726)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue点击按钮跳转到路由](https://blog.csdn.net/m0_51933554/article/details/127821725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值