nativescript - NativeScript vue，vuex和urlhandler

编辑

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

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();

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

我之前写的所有下面的内容都可能使事情感到困惑-我在vuex存储中引用了组件，以使其可以从路由器轻松使用。

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

我正在使用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是因为vuex中无法使用nextTick。

我对如何使页面显示不知所措...

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的已安装生命周期挂钩中初始化处理程序。请参阅上面的详细信息。

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();

关于nativescript - NativeScript vue，vuex和urlhandler，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56365775/