Exception d'interface de routage lors de la construction de vue-router

Cette fois, je vais vous présenter l'exception d'interface routagelorsque vue-router est construit. Les précautionssont là pour résoudre le problème de l'exception d'interface de routage lorsque vue-router. est construit. Lesquels, les suivants sont des cas pratiques, jetons un coup d'œil.

Créer 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 ainsi

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. npm run build package

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

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

============2017.8.24Mise à jour================

Après avoir recherché quelques informations supplémentaires, j'ai découvert qu'il était réellement 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û au fait que l'élément est utilisé Une méthode de traitement des messages qui apparaît dans l'interface utilisateur. 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment gérer l'écran blanc sur la page d'accueil une fois la version de vue emballée

Comment Native utilise fetch pour implémenter la fonction de téléchargement d'images

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!