Maison > interface Web > js tutoriel > le corps du texte

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é)

亚连
Libérer: 2018-06-01 09:30:33
original
1484 Les gens l'ont consulté

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
 }
 ]
})
Copier après la connexion

<a href="/first" rel="external nofollow" >Try this!</a>
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal