编辑

我正在使用 https://github.com/hypery2k/nativescript-urlhandler在我的应用程序中打开深层链接 - 使用 NativeScript vue 和 vuex。似乎为了获得路由 [$navigateTo 等] 所需的方法，此插件的设置需要与文档中给出的示例略有不同。

import Vue from "nativescript-vue"; 
import Vuex from "vuex"; 
Vue.use(Vuex); 
 
import { handleOpenURL } from 'nativescript-urlhandler'; 
 
new Vue({ 
    mounted() { 
        handleOpenURL( (appURL) => { 
            console.log(appURL) 
            // Settings is the variable that equals the component - in this case settings. 
            this.$navigateTo(Settings); 
        }); 
    }, 
    render: h => h("frame", [h(Home)]), 
    store: ccStore 
}).$start(); 

handleOpenURL 需要在 Mounted 中调用 - 然后您可以解析出 appURL 并引用您希望导航到的页面(组件)。有人建议我不要从路由器内部调用 handleOpenURL - 但我不确定为什么，它可以正常工作 - 我可以访问路由方法......所以如果有人知道这是否是个坏主意 - 请让我知道 :) 谢谢!

我之前写的下面的所有内容可能让事情变得困惑 - 我在我的 vuex 存储中引用组件，以便从路由器轻松访问它们。

这是基于 https://github.com/Spacarar 的解决方案- 可以在这里找到:https://github.com/geodav-tech/vue-nativescript-router-example .这是一个很好的解决方案，因为您不必在每个组件中包含每个组件即可在导航中使用 - 它提供了几乎像 vue 路由器一样的体验。

我正在使用 https://github.com/hypery2k/nativescript-urlhandler在我的应用程序中打开深层链接 - 但是，我在打开链接时遇到问题。

在我的 app.js 文件中，我有以下内容:

import Vue from "nativescript-vue"; 
import Vuex from "vuex"; 
Vue.use(Vuex); 
.... 
import { handleOpenURL } from 'nativescript-urlhandler'; 
import ccStore  from './store/store'; 
 
 
handleOpenURL(function(appURL) { 
// I have hardwired 'Settings' in for testing purposes - but this would be the appURL 
    ccStore.dispatch('openAppURL', 'Settings'); 
}); 
 
.... 
 
new Vue({ 
    render: h => h("frame", [h(Home)]), 
    store: ccStore 
}).$start(); 

我将路由状态存储在 vuex 中，并且有各种有效的方法(单击链接加载组件)。但是，handleOpenURL 存在于 vue 之外......所以我不得不直接从 handleOpenURL 方法中访问 vuex。我专门为这种情况创建了一个操作 - openAppURL.. 它与我的其他方法完全相同(尽管我已经合并了它)。

当我点击一个应用程序链接时，我没有被带到应用程序内的页面。我在 openAppURL 中放置了一个控制台日志，可以看到它正在被调用，并且返回了正确的路由对象......它只是没有打开页面。使用 SetTimeOut 是因为 nextTick 在 vuex 中不可用。

我不知道如何让页面出现...

const ccStore = new Vuex.Store({ 
    state: { 
        user: { 
            authToken: null, 
            refreshToken: null, 
        }, 
        routes: [ 
            { 
                name: "Home", 
                component: Home 
            }, 
            { 
                name: "Log In", 
                component: Login 
            }, 
            ... 
        ], 
        currentRoute: { 
            //INITIALIZE THIS WITH YOUR HOME PAGE 
            name: "Home", 
            component: Home //COMPONENT 
        }, 
        history: [], 
    }, 
    mutations: { 
        navigateTo(state, newRoute, options) { 
            state.history.push({ 
                route: newRoute, 
                options 
            }); 
       }, 
    }, 
    actions: { 
        openAppURL({state, commit}, routeName ) { 
            const URL =  state.routes[state.routes.map( (route) => { 
                return route.name; 
            }).indexOf(routeName)]; 
 
            return setTimeout(() => { 
                commit('navigateTo', URL, { animated: false, clearHistory: true }); 
        }, 10000); 
       }, 
       .... 
     } 
   etc.... 

请您参考如下方法:

有人建议我发布我的发现作为答案并将其标记为正确。为了在 vue 中使用 nativescript-urlhandler，您必须从 vue 的挂载生命周期 Hook 中初始化处理程序。有关详细信息，请参阅上文。

import Vue from "nativescript-vue"; 
import Vuex from "vuex"; 
Vue.use(Vuex); 
 
import Settings from "~/components/Settings"; 
 
import { handleOpenURL } from 'nativescript-urlhandler'; 
 
new Vue({ 
    mounted() { 
        handleOpenURL( (appURL) => { 
            console.log(appURL) // here you can get your appURL path etc and map it to a component... eg path === 'Settings. In this example I've just hardwired it in. 
            this.$navigateTo(Settings); 
        }); 
    }, 
    render: h => h("frame", [h(Home)]), 
    store: ccStore 
}).$start();