Nativescript Vue 导航问题

Posted 2023-04-13

【中文标题】Nativescript Vue 导航问题

【英文标题】：Nativescript Vue navigation struggles

【发布时间】：2019-04-01 19:28:11

【问题描述】：

我刚开始使用 NativeScript，但我不明白如何导航页面/视图。不幸的是，vue-router 似乎仍然不受支持，所以我正在考虑使用手动路由。但是，我在 app\components 中有多个 vue 组件，不想像 example 显示的那样将它们全部放在一个 vue 中。

我的第一个页面视图中有这个：

<script>
import pageB from "./PageB";

export default 
    methods: 
        onButtonTap() 
            //console.log("Page B Button was pressed");
            this.$navigateTo(pageB);
        
    ,
    created() ,

    data() 
        return ;
    ,
    mounted() 
;
</script>

但是当我点击按钮时，我会收到一条消息：

[iPhone 8+]: The Preview app has terminated unexpectedly. Please run it again to get a detailed crash report. [iPhone 8+]: 'NSVue (Vue:
2.5.17 | NSVue: 2.0.0) -> CreateElement(nativelabel)' 2018-10-28 13:54:15.823 nsplaydev[1294:331774] -[TNSLabel useLayoutToLayoutNavigationTransitions]: unrecognized selector sent to instance 0x10a909f00 2018-10-28 13:54:15.826 nsplaydev[1294:331774] PlayLiveSync: Uncaught Exception 2018-10-28 13:54:15.827 nsplaydev[1294:331774] PlayLiveSync: Sending crash report 2018-10-28 13:54:19.831 nsplaydev[1294:331774] *** javascript call stack: ( 0 pushViewControllerAnimated@[native code] 1 pushViewControllerAnimated@file:///app/tns_modules/tns-core-modules/ui/frame/frame.js:343:61 2
_navigateCore@file:///app/tns_modules/tns-core-modules/ui/frame/frame.js:116:56 3 performNavigation@file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:235:27 4
_processNextNavigationEntry@file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:227:39 5 navigate@file:///app/tns_modules/tns-core-modules/ui/frame/frame-common.js:131:41 6 navigate@file:///app/tns_modules/nativescript-vue/dist/index.js:6494:24 7 navigate@[native code] 8 @file:///app/tns_modules/nativescript-vue/dist/index.js:13221:26 9 initializePromise@:1:11 10 Promise@[native code] 11 $navigateTo@file:///app/tns_modules/nativescript-vue/dist/index.js:13198:25 12 onButtonTap@file:///app/components/PageB.js:20:29 13 onButtonTap@[native code]
    2018-10-28 13:54:19.831 nsplaydev[1294:331774] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[TNSLabel useLayoutToLayoutNavigationTransitions]: unrecognized selector sent to instance 0x10a909f00'

*** First throw call stack:
(0x226727ef8 ....)
libc++abi.dylib: terminating with uncaught exception of type NSException
2018-10-28 13:54:19.832 nsplaydev[1294:331774] PlayLiveSync: Uncaught Exception

我注意到错误将所需页面引用为 javascript: PageB.js 甚至认为它不存在。这是否意味着路由不能在这里与 vue 组件一起使用？

如果有人能给我指出 NativeScript 的多 vue.file 示例，也许这会帮助我解决这个问题。

【参考方案1】：

使用const pageB = require("./PageB").default;

而不是import pageB from "./PageB";

【参考方案2】：

当我第一次被介绍到 NS 导航时，我不明白所有导航都发生在一个元素内。不确定这是您的问题，但也许可以快速检查一下。一个简单的单帧示例可能是：

<template>
  <Frame>
    <PageA />
  </Frame>

然后像您的示例所示在 PageA 中导航到 PageB。