在 js 代码中的其他选项卡中打开 url 时出错

Posted 2023-02-22

【中文标题】在 js 代码中的其他选项卡中打开 url 时出错

【英文标题】：Error with opening url in other tab in js code

【发布时间】：2020-02-22 09:28:12

【问题描述】：

在我的 Laravel 5.8 / "vue": "^2.6.10"/ app 我需要在 js 代码的其他选项卡中打开 url。我找到了例子

let routeData = this.$router.resolve(name: 'routeName', query: data: "someData");
window.open(routeData.href, '_blank');

这里 Can vue-router open a link in a new tab?

但实施它我没有找到有效的方法：

let routeData = this.$router.resolve(  name: 'editHostel', query: params:  id : 48    );


            OR

let routeData = this.$router.resolve(  name: 'editHostel', query: id: date.id  );


        window.open(routeData.href, '_blank');

在这两种情况下生成的 url 都是无效的。

在 resources/js/routes.js 我有：

    path: '/admin/hostels',
    component: hostelsContainer,
    meta: 
        requiresAuth: true,
        authGroupsAccess: ['Admin', 'Manager'],
    ,
    children: [
        
            path: '/admin/hostels/',
            component: hostelsList,
            name: 'listHostels'
        ,
        
            path: '/admin/hostels/new',
            component: editHostel,
            name: 'newHostel'
        ,
        
            path: ':id',
            component: editHostel,
            name: 'editHostel'
        ,

哪种方式有效？

【问题讨论】：

你是在 laravel 中做单页应用吗？

【参考方案1】：

我根据链接Can vue-router open a link in a new tab?找到了一个决定 如：

let routeData = this.$router.resolve(   path: '/admin/hostels/' + date.originalEvent.hostel_id +"/open_hostel_inquery_feedback/"+date.id);
window.open(routeData.href, '_blank'); 

这对我有用！

【参考方案2】：

不要在 laravel 中制作 SPA（单页应用程序）。 如果你真的想创建 SPA 然后使用 vue cli

否则，使用 vue.js 作为 jQuery 的替代品。这让您可以在单个项目中使用 laravel 和 vue.js 制作交互式网站。

您将能够在不必使用 vue 的情况下使用刀片视图，反之亦然。

【讨论】：

Afraz Ahmad，虽然你的回答似乎离题了，但我很感兴趣 :1) 请详细一点，为什么？ 2）什么可以用于数据库操作？ 3) 请提供一个链接，其中包含带有数据库操作实现的正确 SPA 示例...

数据库操作是什么意思？您是在谈论对服务器的 ajax 调用吗？如果是，那么您可以使用 axios github.com/axios/axios 这样做。

看看这个github.com/gothinkster/vue-realworld-example-app 这是非常好的回购。但他们使用的最佳做法一开始可能会让人不知所措。

感谢您的链接，非常有趣，但是使用 db 的部分在哪里？我的意思是从/向数据库读取/写入数据。有些是一些不同的应用程序，作为 api 端点？在 t5he 应用程序的源代码中，我找到了指向 conduit.productionready.io/api 的链接，它是某个 api 端点吗？

vue.js + vuex中的SPA。它使用 API 来处理 DB 部分。