【发布时间】:2020-05-30 03:49:32
【问题描述】:
所以我正在为一个学校项目创建一个应用程序,并且我正在尝试制作一个导航屏幕。 我有一个带有 2 个按钮的屏幕,我正在努力让它们工作。如果我单击/按下按钮,我想转到不同的屏幕。 我是新手,这是我第一次使用 Vue Native。
当前代码:
<template>
<div id="app">
<HelloWorld msg="CarnavalXL"/>
<div id="nav">
<button @press="goToParadeScreen" class="nav-button">Optochten</button>
<button href="screens/Parades.vue" class="nav-button" title="Niews">Nieuws</button>
<router-link to="Parades" class="nav-button">Parades</router-link>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'CarnavalXL',
components: {
HelloWorld,
AppNavigator
},
props: {
navigation: {
type: Object
}
},
methods: {
goToPAradeScreen() {
this.navigation.navigate("Parades");
}
}
}
import {
createAppContainer,
createStackNavigator,
} from "vue-native-router";
import Parades from "./Parades.vue";
this.navigation.navigate("Parades", {/* options go here */});
const StackNavigator = createStackNavigator(
{
Parades: Parades,
},
{
initialRouteName: 'Parades',
}
);
const AppNavigator = createAppContainer(StackNavigator);
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
margin-left: 25vw;
margin-right: 25vw;
}
.nav-button {
background-color: rgba(0, 0, 0, 0.3);
padding: 100px 0px;
width: 20vw;
display: inline-block;
margin: 5px;
color: #fff;
font-size: 40px;
font-weight: 800;
}
</style>
我收到以下错误:
Failed to compile.
./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
D:\carnavalxl\src\App.vue
19:5 error The "AppNavigator" component has been registered but not used vue/no-unused-components
✖ 1 problem (1 error, 0 warnings)
我按照Vue Native网站上的指南进行操作
我不知道这里出了什么问题
【问题讨论】:
标签: html vue-component vue-router