NativeScript vue、vuex和urlhandler
编辑 我正在使用NativeScript vue和vuex在我的应用程序中打开一个深层链接。似乎为了获得路由所需的方法[NativeScript vue、vuex和urlhandler,nativescript,vuex,deep-linking,nativescript-vue,Nativescript,Vuex,Deep Linking,Nativescript Vue,编辑 我正在使用NativeScript vue和vuex在我的应用程序中打开一个深层链接。似乎为了获得路由所需的方法[$navigateTo等],这个插件的设置需要与文档中给出的示例略有不同 import Vue from "nativescript-vue"; import Vuex from "vuex"; Vue.use(Vuex); import { handleOpenURL } from 'nativescript-urlhandler'; new Vue({ moun
$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中调用handleAppUrl,然后您可以解析出appURL并引用希望导航到的页面(组件)。有人建议我不要从路由器内部调用handleOpenURL-但我不知道为什么,它可以正常工作-我可以访问路由的方法。。。所以,如果有人知道这是一个坏主意,请让我知道:)谢谢
我以前写过的下面的内容可能会把事情弄糊涂——我正在引用vuex商店中的组件,以便从路由器上轻松获得它们
这是基于的解决方案-可在此处找到:。这是一个很好的解决方案,因为您不必在导航中使用每个组件中包含每个组件——它提供了一种几乎与vue路由器类似的体验
我使用在我的应用程序中打开一个深层链接-但是,我在打开链接时遇到问题 在我的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();
如果您使用的是Vue路由器,我希望您知道它不受支持。我在上面没有看到任何与手动路由相关的代码,你能解释一下你到底在哪里运行导航代码吗。嗨@Manoj-我在mixin中执行路由位-但是你完全正确,我必须重构以获得$navigateTo方法。。。我将用我修订的代码更新以上内容。。。似乎NativeScript vue的设置需要与中的示例不同。如果你能给出你的意见,我将不胜感激——威尔现在就发帖:)谢谢!