Comment résoudre le problème selon lequel la page de routage ne peut pas être affichée correctement lors de la construction dans vue-router (tutoriel détaillé)

Ci-dessous, je vais partager avec vous un article qui résout le problème selon lequel vue-router ne peut pas afficher correctement la page de routage lors de la construction. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Créez un projet webpack en utilisant vue cli

Ajoutez vue-router et utilisez le routage pour introduire un nouveau composant. A cette époque, le routage et les liens sont écrits comme ceci

const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
 {
  path: '/first',
  component: firstCom
 }
 ]
})

<a href="/first" rel="external nofollow" >Try this!</a>

1. npm run dev Vérifiez qu'il n'y a pas de problème

2. npm run build package

3. Démarrez un service (par exemple : python -m SimpleHTTPServer) puis vérifiez la page index.html et constatez que l'itinéraire demandera la /première page.

4. Solution : modifiez l'historique dans la configuration de routage en hachage et remplacez le /first dans le lien par /#/first. Problème résolu.

============Mise à jour le 24.8.2017================

Après avoir recherché quelques informations, j'ai découvert qu'il est effectivement possible d'utiliser l'historique pour le mode routeur. Le problème est survenu lorsque je faisais le saut. J'ai pris pour acquis que j'utilisais window.location.href="", mais en réalité je devrais utiliser router.push. Le handleSelect dans le code est dû à l'utilisation d'une méthode de traitement de message qui apparaît dans l'élément ui. On peut comprendre que cette méthode se déclenche lorsque l'on clique sur le bouton. Si la touche du bouton est 2, alors saute au premier, et si la touche est 3, passe au second.

<script>
 export default {
 data () {
  return {
  }
 },
 methods: {
  handleSelect(key, keyPath) {
  if (key == 2){
   this.$router.push(&#39;first&#39;);
  } else if (key == 3){
   this.$router.push(&#39;second&#39;);
  }
  }
 }
 }
</script>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Méthode d'implémentation de la barre de navigation en étoile JavaScript

calculé, filtre, obtention de vue.js, détaillé explication de l'utilisation et de la différence de set

Explication détaillée de l'ensemble du processus depuis l'achat d'un nom de domaine jusqu'à l'utilisation de pm2 pour déployer le projet node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!