pratique du projet vue-router (tutoriel détaillé)

vue-router est la bibliothèque de routage officielle de Vue.js. Cet article présente principalement le résumé pratique du projet vue-router. Les amis dans le besoin peuvent s'y référer

Parlons du projet vue aujourd'hui. {vue,vue-router,component } vue-router, un des trois grands généraux. En tant que l'une de nos pratiques importantes en matière de séparation front-end et back-end, le routeur nous aide à effectuer des sauts de page entre les applications SPA.

Et, avec des bibliothèques tierces comme axios, nous pouvons implémenter des fonctions d'intercepteur qui fonctionnent avec l'interface d'arrière-plan.

Pour un petit projet, il suffit que le dossier du routeur contienne un router.js.

Cependant, lorsque nous avons beaucoup de pages, nous devons les diviser en deux fichiers : l'un définit nos routes et nos composants, l'autre instancie les composants et monte la route vers l'instance de vue.

Je n'entrerai pas dans les détails sur l'utilisation de base. Vous pouvez consulter le site officiel de vue-router Si vous le lisez attentivement, il n'y aura certainement aucun problème dans l'utilisation de base.

1. Pourquoi mon itinéraire ne fonctionne-t-il pas

Un point très important ici est lorsque nous construisons une instance de VueRouter ? il y a un problème avec les paramètres transmis.

import routes from '@/router/router'
const router = new VueRouter({
 routes // （ES6语法）相当于 routes: routes
})
new Vue({
 router
}).$mount('#app')

Si ce que vous introduisez ici ne sont pas des itinéraires, vous devez l'écrire de la manière suivante.

import vRoutes from '@/router/router'
const router = new VueRouter({
 routes :vRoutes 
})
new Vue({
 router
}).$mount('#app')

2. Implémenter le chargement paresseux des composants basés sur webpack dans le routage

Pour nos projets vue, nous utilisons essentiellement Packaged by webpack , s'il n'y a pas de chargement paresseux, les fichiers empaquetés seront anormalement volumineux, ce qui entraînera un écran blanc sur la page d'accueil, des retards importants et ne favorisera pas l'expérience utilisateur. Un chargement paresseux peut être utilisé pour diviser la page et des packages Webpack différents. composants dans de nombreux petits fichiers js. Chargez de manière asynchrone lorsque cela est nécessaire pour optimiser l'expérience utilisateur. En d'autres termes, seuls un ou deux utilisateurs sur 100 peuvent accéder à certaines pages, alors pourquoi y consacrer du trafic.

import App from '@/App.vue'
const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')
export default [{
 path: '/',
 component: App,
 children: [
  {
    path: '/index',
    name:'index',
    component: index
  }]
}]

Si un composant contient des routes imbriquées, nous pouvons également regrouper les deux routes dans un morceau js.

// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')
const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3. Modes du routeur

Pour les navigateurs, notre routeur est divisé en deux modes.

1.mode de hachage (par défaut)

Selon la structure de base d'un uri, le mode de hachage est traité dans un fragment d'URI de base. Si nous mettons de côté SPA, le scénario d'application le plus courant est que lorsque nous construisons un centre commercial PC, il y aura un changement d'onglet tel que les détails du produit, les commentaires et les paramètres du produit. Nous pouvons utiliser la balise a avec l'ID et ajouter un. peu de mouvement. Les effets spéciaux sont très bons.

C'est également la méthode de routage par défaut utilisée par le routeur. Cependant, cette méthode présente un inconvénient, c'est-à-dire que lors de la connexion au tiers payant, nous transmettons une URL vers le tiers payant comme adresse de rappel, mais une fois le paiement effectué, certains tiers payants transféreront notre # En tant que symbole d'interception, seul le contenu de l'URL avant le premier symbole # est conservé et les paramètres de rappel correspondants sont ajoutés ultérieurement. Par conséquent, une fois le paiement effectué, il ne peut pas accéder à la page de paiement correspondante

URL entrante :

http://xx.xx.com/#/pay/123

Adresse après rappel :

http://xx.xx.com/pay/123?data=xxxxx%xxxx

2.mode historique

Il existe également le mode historique. Il utilise history.pushState de h5 pour terminer le saut d'URL. L’avantage d’utiliser cette méthode pour gérer les sauts est que l’URL n’est pas différente de ce que nous voyons habituellement. Par rapport au mode hachage, il n'y a pas de #. Cependant, lorsque nous utilisons le mode historique, nous devons également effectuer le traitement correspondant en arrière-plan, car si nous accédons directement à une adresse, telle que http://www.xxxx.com/user/id, si le backend n'est pas configuré, alors Le client renverra une page 404.

4.router-link est dans la boucle ceci. Nom du paramètre = non défini

b988a8fd72e5e0e42afffd18f951b277 Le composant de saut qui doit être utilisé. Elle remplace ce que la balise 3499910bf9dac5ae3c52d5ede7383485 doit faire et nous aide à faire bien plus.

Qu'il s'agisse du mode historique h5 ou du mode hachage, son comportement en termes de performances est cohérent, donc lorsque vous souhaitez changer de mode de routage ou rétrograder pour utiliser le mode hachage dans IE9, aucune modification n'est requise.

En mode historique HTML5, router-link gardera l'événement de clic afin que le navigateur ne recharge pas la page.

Lorsque vous utilisez l'option de base en mode historique HTML5, tous les attributs n'ont pas besoin d'être écrits (chemin de base).

Mais lorsque nous utilisons router-link dans une boucle v-for, d'une manière générale, ce que nous devons obtenir, ce sont les valeurs dans la boucle, qui peuvent être obtenues via l'élément défini.xxx. Si nous avons besoin d'obtenir une valeur que nous avons définie dans data, l'obtenons-nous via this.foo ? Ou dois-je le récupérer via foo ? Ou est-ce que ça va ?

Ici, nous ne pouvons pas l'obtenir via this.foo, car ceci ici ne pointe plus vers l'instance de vue, mais pointe vers [object Window]. Donc si vous utilisez this.foo pour le récupérer, il est en fait indéfini.

 <router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
   //含有固定的值
  <p>{{this.foo}}</p>
  <p>{{foo}}</p>
 </router-link>
data(){
  return {
    foo:&#39;bar&#39;,
  } 
}

4. Utiliser vue-router avec axios

 初次接触拦截器这个概念是在java中，通过拦截器，我们可以对用户的登录状态进行更加粒度的操作。而对于一个SPA的应用来说，没有了后台路由的介入，我们就需要在前端实现一套自己的登录状态的管理机制。

最直观的一点就是，通过用户的token来判断用户是否登录？

router.beforeEach((to, from, next) => {
 const NOW = new Date().getTime();
 if (to.matched.some(r => r.meta.requireAuth)) {
  if(NOW > store.state.deadLine){
   store.commit('CLEAR_USERTOKEN')
  }
  if (store.state.message.login === true) {
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath}
   })
  }
 }
 else {
  next();
 }
})

上面的代码中，我们通过vue-router中的全局守卫，在导航触发的时候大致做了如下几件事：

（1）判断导航的页面是否需要登录

（2）超过登录持久期限，清除持久化的登录用户token

（3）没有超过登录期限，判断是否登录状态

（4）没登录，重定向到登录页面

但是，仅仅这样是不够的。因为用户直接不正常注销而直接后台运行网页是很正常的事情，这就导致虽然token是存在的，但是对于后台而言，这个token是无效的，过期的了。所以，我们需要axios配合后台给出的状态码来完善我们的拦截器。

import router from '@/router/routes'
axios.interceptors.response.use(
 success => {
  switch (success .code) {
   case -100:
    router.replace({
     path: 'login',
     query: {redirect: router.currentRoute.fullPath}
    })
    console.warn('注意,登录已过期!')
    break;
  }
  return success;
 },
 error => {
   switch (error.code) {
    case 404:
     console.warn('请求地址有误或者参数错误!')
    break;
   }
  return Promise.reject(error.response.data)
 });

 通过后端给到的登录过期状态码，这里以-100为例，我们可以用axios的响应拦截器实现，当我们的token过期的时候，我们将页面重定向到登录页面去。

 5.巧用replace替换push

在项目中，我有的同事就是一直this.$router.push(...)，从开始push到结尾。

碰到有的页面，比如说，在选择地址的时候需要知道用户当前所在的城市，如果没有的话，就是重定向到城市列表页面去手动选取。选择完成以后再回到选择地址的页面，如果一直使用push的话，点击选择地址的后退时，就会回退到城市列表页。然后造成页面间的死循环。

这里如果使用replace来操作就没有什么问题了，问题就是我们不应该让城市列表页出现在我们的浏览历史里面。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javascript中如何实现填充默认头像

JavaScript的6种正则表达式（详细教程）

react webpack打包后的文件（详细教程）

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!