Comment modifier le mode de hachage de routage dans Uniapp

Avec le développement continu de l'Internet mobile et de la technologie Web, de plus en plus d'entreprises et de développeurs commencent à adopter des cadres de développement multiplateformes pour développer rapidement des applications multiterminaux. En tant que l'un des frameworks de développement multiplateformes les plus populaires, UniApp a été largement utilisé et reconnu. Dans le processus de développement actuel, le mode de routage par défaut utilisé par UniApp est le mode de hachage, mais nous devons parfois modifier le mode de routage, par exemple lorsqu'il existe certains besoins d'optimisation du référencement. Cet article explique comment modifier le mode de hachage de routage dans UniApp.

1. Introduction au mode de routage UniApp

Avant de présenter le mode de routage UniApp, comprenons d'abord ce qu'est le routage. Le routage est essentiellement un mécanisme permettant de basculer entre les pages et les composants de gestion. Dans UniApp, le mode de routage par défaut est le mode hachage. Le soi-disant modèle de hachage consiste à assembler une chaîne commençant par # à la fin de l'URL, telle que http://www.example.com/#/signin. Nous pouvons basculer vers différentes pages en modifiant cette chaîne.

L'utilisation de base du routage dans UniApp est la suivante :

<template>  
  <div>  
    <router-view></router-view>  
  </div>  
</template>  

<script>  
export default {  
  name: 'app',  
  components: {  
    HelloWorld  
  }  
}  
</script>

Il s'agit d'un exemple de configuration de routage simple. Vous pouvez voir que nous devons utiliser la balise router-view dans le modèle pour afficher les composants de routage.

2. Modifier le mode de hachage de routage

Dans le développement actuel, nous devons parfois modifier le mode de routage. Par exemple, nous devons changer le mode de routage du mode hachage au mode historique pour faciliter l'optimisation du référencement. Nous présenterons ensuite comment modifier le mode de routage.

1. Modifiez le fichier unpackage/dist/dev/mp-weixin/router/index.js

Ce fichier est le fichier de configuration de routage de l'applet WeChat emballé. Nous devons d'abord entrer le fichier pour le modifier. Ajoutez le code suivant en haut du fichier :

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

// 修改路由模式为history模式  
const router = new VueRouter({  
  mode: 'history'  
})

De cette façon, on change le mode de routage en mode historique.

2. Modifiez le fichier unpackage/dist/dev/web/router/index.js

Ce fichier est le fichier de configuration de routage packagé côté Web Nous devons également d'abord saisir ce fichier pour le modifier. Ajoutez le code suivant en haut du fichier :

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

// 修改路由模式为history模式  
const router = new VueRouter({  
  mode: 'history'  
})

De même, nous changeons également le mode de routage en mode historique.

3. Modifier le fichier App.vue

La dernière étape est que nous devons modifier le fichier App.vue. Dans ce fichier, nous pouvons monter la route vers Vue via le code suivant, puis utiliser router.beforeEach pour surveiller les changements de route afin d'obtenir le rendu et la commutation de page.

<template>  
  <div>  
    <router-view></router-view>  
  </div>  
</template>  

<script>  
import router from './router/index'  

export default {  
  router,  
  name: 'app',  
  components: {  
    HelloWorld  
  }  
}  
</script>

À ce stade, nous avons terminé la modification du mode de routage. Reconditionnez l'application et déployez-la sur le serveur pour vérifier si le mode de routage est modifié avec succès.

3. Résumé

Ce qui précède explique comment UniApp modifie le mode de hachage de routage introduit dans cet article. Le routage est un élément essentiel de chaque application. Le choix du mode de routage approprié peut améliorer l'expérience utilisateur et l'effet d'optimisation SEO de l'application. J'espère que cet article pourra vous fournir de l'aide dans le développement du routage UniApp.

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!