nativescript - NativeScript vue、vuex 和 urlhandler
问题描述
编辑
我正在使用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();
需要在 Mounted 中调用 handleOpenURL - 然后您可以解析出 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 的挂载生命周期挂钩中初始化处理程序。请参阅上文了解更多详情。
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();
推荐阅读
- fortran - 从模块中,仅使用派生数据类型的某些组件
- android - 如何从 Jetpack Compose TextField 关闭虚拟键盘?
- java - 将元素插入排序数组
- jquery - 背景图像在 Iphone 和 ipad 中看起来被拉伸
- c++ - 在字符串中查找多个子字符串时遇到问题
- javascript - 通过javascript计算数字类型输入字段的总和
- scala - 如何从 Spark Scala 中的案例类映射数组
- python - 来自单个字段数组的结构化数组(python,numpy)
- java - 在 Java Swings 中自定义 JTextField - 向 JTextField 添加简单/复合/自定义边框
- java - 使用没有泛型的自定义类而不是 Java 中的普通集合是个好主意吗?