Comment gérer le fait que la page de routage ne s'affiche pas lors de la construction de vue-router

Cette fois, je vais vous montrer comment gérer le fait que la page routage ne s'affiche pas lorsque vue-router est construit. Quelles sont les précautions à prendre en compte lorsque vue-router est construit. building et n'affiche pas la page de routage ? , ce qui suit est un cas pratique, jetons un oeil.

Créez un projet webpack en utilisant vue cli

Ajoutez vue-router et utilisez le routage pour introduire un nouveau composant. À l'heure actuelle, 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 Il n'y a aucun problème avec npm run dev

2. 🎜>3. Démarrez un service (par exemple :

-m SimpleHTTPServer), puis affichez la page index.html et constatez que la route 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('first');
  } else if (key == 3){
   this.$router.push('second');
  }
  }
 }
 }
</script>

Lecture recommandée :

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!