Итак, я создаю приложение для школьного проекта и пытаюсь создать экран навигации. У меня экран с 2 кнопками и я пытаюсь заставить их работать. Если я нажимаю / нажимаю на кнопку, я хочу go на другой экран Я новичок в этом, это первый раз, когда я использую 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 Родной
Я не знаю, что здесь не так