Utiliser Vue Router

Bonjour,
Comment est structuré ton projet ?
Je trouve étrange que ton path '/' pointe vers le composant App.
Avec vue-cli, c'est généralement le App.vue qui est à la racine et à l'intérieur il y a la balise <router-view>

La structure de mon projet est assez simple j'ai simplement 3 composants tests dans mon App.vue, avec des balises h1 dans ces derniers :

-HeaderTop.vue

-MainMiddle.vue

-FooterBottom.vue

Et pour ce qui est de mon App.vue, j'ai déclaré et importer les composants enfants, mis la balise routerview et même en supprimant sa ligne "path" dans le main.js mes éléments ne s'affichent toujours pas.

<div class="app">

  <HeaderTop></HeaderTop> 
  <MainMiddle></MainMiddle>
  <FooterBottom></FooterBottom>

<routerview></routerview>

  </div>
</template>

<script>
import HeaderTop from './components/HeaderTop.vue'
import MainMiddle from './components/MainMiddle.vue'
import FooterBottom from './components/FooterBottom.vue'

export default {
  name: 'App',
  components: {
    HeaderTop, MainMiddle, FooterBottom
  }
}
</script>

Merci d'avance.

Ton fichier App.vue, c'est le conteneur dans lequel les "pages" du site seront chargées.
Donc, en supposant que ton Header et ton Footer apparaissent sur toutes tes pages et que MainMiddle soit ton contenu, ton App.vue devrait plutot ressembler à ça :

<template>
  <div class="app">

    <HeaderTop></HeaderTop> 
    <routerview></routerview>
    <FooterBottom></FooterBottom>

 </div>
</template>

<script>
import HeaderTop from './components/HeaderTop.vue'
import FooterBottom from './components/FooterBottom.vue'

export default {
  name: 'App',
  components: {
    HeaderTop, FooterBottom
  }
}
</script>

Et dans tes routes tu aurais ça :

const routes = [
    { path: '/', component: MainMiddle },
    { path: '/page2', component: Page2 },
    { path: '/pageN', component: PageN }
  ]

Le problème c'est que même en changeant cette structure du App.vue, en changeant les routes et pleins d'autres trucs ça ne change rien, car le problème viens surtout après avoir mis ce code, qui est indispensable malheureusement mais qui me supprime l'affichage de tous mon site.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

Même en faisant plusieurs recherches sur Google de ce problème je n'ai rien trouvé.
Donc si je ne trouve pas une solution je me dit que je pourrais essayé de repasser sans Vue CLI, en utilisant le CDN au lieu du npm, surtout qu'il y a d'autres trucs qui me bloque avec Vue CLI, tel que les props, les export default dans les scripts et la syntaxe assez compliqué, ainsi que l'impossibilité de backup facilement et rapidement au vu de la taille du projet et le plugin Chrome qui ne détecte pas Vue.js avec Vue CLI ce qui m'empêche de débugguer simplement.

Bonjour,
Pour le débuggage, je te conseille de ne changer qu'une chose à la fois et de tester.

Est-ce que tu as un dépot qq part ou on peut voir le code que tu as actuellement et l'organisation de tes fichiers ?

Bonjour,

Excusez-moi pour la réponse tardive, je n'avais pas vu et j'essayais de faire fonctionner Vue-Router avec l'import CDN,
mais malgré maintes tentatives je n'ai pas réussi non plus sur ça.

Bonjour,

Alors j'ai pris mon temps pour tester et que ce soit en recopiant ton dépôt, ou en copiant les composants, pages et le contenu du main.js, ou le lançant directement en local avec npm run serve j'ai toujours un affichage blanc avec rien d'affiché comme si le routeur n'était pas détecté, et en supprimant les imports et déclarations du routeur dans le main.js, les composants réapparaissent mais ne sont pas fonctionnels bien sûr.

Chez toi, tu a réussi à faire fonctionner le routeur avec ce dépôt en localhost ?

Et je me demandais, faut-il des fichiers en dehors du dossier ?

Car VSCode m'indique qu'il me manque le package.json et le tsconfig.json/jsconfig.json quand je lance le serveur local
Et même après avoir essayé avec la 4ème version npm install vue-router@4 j'ai ce message d'erreur :

Failed to compile.
./node_modules/vue-router/dist/vue-router.esm.js

Merci quand même de ton aide, je vais continuer de chercher de mon côté.

Salut,

je viens de refaire le test en clonant le dépôt et en faisant un npm install puis un npm run serve (avec la dernière lts de node) et je n'ai pas de message d'erreur.
Est-ce que tu as des erreurs dans le terminal ou dans la console du navigateur ?

Salut,
Désolé pour le délai, j'était assez pris en ce moment, du coup j'ai ressayé avec ton code ça marche enfin, sûrement grâce à la syntaxte et le mount qui sont différents, donc il fallait bien réinstaller Vue Routeur avec la commande npm et la version 4 précisément.
Puis de redémarrer le serveur sinon le message d'erreur envoyé plus haut survenait dans le débuggeur Vue-CLI sur le navigateur.
Maintenant que la navigation avec le Routeur fonctionne je vais sûrement garder ce dépôt comme base pour mes futurs projets, si d'autres personnes passent par là et veulent faire pareil, je recommande juste de déplacer les paths dans un routes.js puis de l'importer dans le main.js pour que ce soit plus propre et lisible quand le projet s'agrandira.

main.js :

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import routes from './routes.js'

const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes
})
createApp(App).use(router).mount("#app")

routes.js :

export default [
  {
    path: '/',
    name: 'Home',
    component: import('./pages/Home.vue')
  },
  {
    path: '/page2',
    name: 'Page2',
    component: import('./pages/Page2.vue')
  }
]

En tout cas merci encore @gillesr pour ton temps et ta patience, tu m'as beaucoup aidé.

Bonjour,

Oui, c'est une bonne habitude de séparer tes routes dans un fichier, ce sera plus maintenable.
Par contre pour des nouveaux projets, je ne partirais pas forcément sur vue-cli mais sur Vite (un équivalent fait par le créateur de vue.js) qui est nettement plus rapide et performant.
Si tu veux tester, j'ai refait le même avec Vite ici : https://github.com/timinh/TestVite

Bonjour,
D'accord, je ne connaissais pas du tout mais merci j'irais voir.