Comment passer à la page précédente dans vue

Cet article partage avec vous une fonction que Vue implémente pour accéder à la page précédente après s'être connecté. Les amis qui ont besoin de cette commodité peuvent en tirer des leçons.

En développement, nous rencontrons souvent une telle demande. L'utilisateur doit cliquer directement sur un lien pour accéder à une page. Après avoir cliqué sur le lien, une interception 401 sera déclenchée et renvoyée à l'interface de connexion. en se connectant, il accédera à la page liée au lieu de la page d'accueil, comment devrions-nous résoudre ce problème ?

Parlons d'abord de quelques API que nous devons utiliser :

1.router.currentRoute : l'objet d'informations de routage actuel, nous pouvons obtenir l'URL analysée via router.currentRoute.fullPath, contient le chemin complet des paramètres de requête et du hachage. Si la route de la page à laquelle accéder a un nom, vous pouvez obtenir le nom de la route actuelle via router.currentRoute.name.

2.router.replace : La fonction est la même que router.push, mais elle n'ajoute pas de nouveaux enregistrements à l'historique, mais remplace l'enregistrement actuel de l'historique.

Étant donné que le code de chacun est écrit différemment, je n'inclurai pas mon code d'implémentation spécifique, mais présenterai brièvement l'idée :

1 Une fois que l'utilisateur a cliqué sur le lien, la cible passe au routage. page, puis déclencher l'intercepteur 401 pour revenir à la page de connexion :

//401拦截
if（status == "401"）{
  router.push("/login")   
}

2 Nous pouvons enregistrer le lien cible dans l'url lors de l'interception 401 :

if (status == 401) {
   //判断当前的路由是否是目标路由
   if(router.currentRoute.name == "target"){
    //跳转回login路由，并把目标路由的url路径保存在login的query中
    router.replace({
     name:"login",
     query: {redirect: router.currentRoute.fullPath}
    })
   }else{
    /* 普通401拦截直接返回到登录页面 */
    router.push('/login');
   }
  }

3 . Cliquez pour vous connecter et utilisez la requête enregistrée sur l'URL pour revenir directement à la page cible

router.push({path:decodeURIComponent(url)});

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Introduction détaillée au document chinois vuex

Comment générer une liste déroulante avec du js pur

À propos de l'utilisation des fichiers dans vue

Comment introduire jquery dans le webpack vue-cli (tutoriel détaillé)

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!