J'utilise Vue 2 en mode CLI avec webpack-simple. J'ai les fichiers suivants:
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes'
Vue.use('VueRouter');
const router = new VueRouter({
routes: Routes
})
new Vue({
el: '#app',
render: h => h(App),
router: router,
})
App.vue:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import Loader from './Loader.vue'
export default {
name: 'app',
}
</script>
<style lang="scss">
</style>
routes.js:
import Game from './components/Game.vue';
import Login from './components/Login.vue';
export default [
{ path: '/', component: Game, name: "Game" },
{ path: '/login', component: Login, name: "Login" }
]
Game.vue et Login.vue se ressemblent:
<template>
<div>
Game
</div>
</template>
<script>
export default {
name: 'game',
}
</script>
<style lang="scss">
div {
border: 1px solid red;
width: 100px;
height: 100px
}
</style>
malheureusement, démarrer un fichier me donne une erreur:
[Vue warn]: Élément personnalisé inconnu: - avez-vous enregistré le composant correctement? Pour les composants récursifs, assurez-vous de fournissez l'option "name".
De plus, la balise router-view n'est pas changée en HTML approprié. J'utilise vue routeur pour la première fois. Il a été installé via NPM dans la version 3.0.1
Aucun conseil?
Vous devez faire ce qui suit:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Réf.: https://router.vuejs.org/fr/installation.html
new Vue({
el: "#app",
router: router,
render: h => h(App)
})
J'espère que cela vous aidera
je ne sais pas si c'est lié à votre problème ou non, mais vous devez utiliser la variable VueRouter "Vue.use (VueRouter)" et non une chaîne "Vue.use ('VueRouter')";