Comment vue résout-il le problème de l'échec de l'actualisation après que addRoutes ajoute dynamiquement des routes ?

Cet article présente principalement comment vue résout le problème de l'échec de l'actualisation après l'ajout de routes ajoutées dynamiquement par addRoutes. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. Avant-propos

Dans certains scénarios, nous devons utiliser addRoutes pour ajouter dynamiquement des itinéraires, mais ils deviendront invalides après l'actualisation. J'ai rencontré ce scénario d'application dans le projet il y a quelque temps, j'ai donc pris le temps d'étudier. partagez-le et enregistrez-le. Veuillez me corriger si je me trompe.
Scénario d'application : L'utilisateur A se connecte au système, et il y a un bouton sur la page Après avoir cliqué, l'itinéraire sera ajouté dynamiquement et sautera . l'utilisateur sera également actualisé. Restez sur la page actuelle. Si vous ne cliquez pas sur ce bouton et ne saisissez pas l'adresse dans le navigateur, l'utilisateur accédera à la page 404

github :https://github.com/Mrblackant...
Voir en ligne :http://an888.net/router/keepR...

Idée

1. le bouton et utilise addRutes pour ajouter dynamiquement des itinéraires et sauter Transférer et enregistrer l'itinéraire;
2. Lorsque l'utilisateur actualise la page nouvellement sautée, utilisez beforeEach pour intercepter et juger s'il s'avère que l'itinéraire a été enregistré auparavant, et il est jugé que la nouvelle page n'est qu'un événement de rafraîchissement, puis ajoutez l'itinéraire précédemment enregistré Entrez ;

Code

1 Cliquez sur le bouton, enregistrez l'itinéraire et sautez.

(1). Déclarez-en un dans le tableau router/index.js, qui contient des routes fixes, telles que votre page de connexion, 404, etc.

//router/index.js
export const constantRouterMap=[
    {
      path: '/',
      // name: 'HelloWorld',
      component: HelloWorld
    }
  ]
Vue.use(Router)
export default new Router({
  routes: constantRouterMap
})

(2). ). Cliquez sur le bouton pour sauter et enregistrer l'itinéraire ;
Remarque, enregistrez l'itinéraire. Cette étape doit être effectuée dans le composant auquel vous souhaitez accéder. Ceci permet d'éviter une boucle infinie avant chaque interception.
L'ajout d'un itinéraire nécessite deux points. L'un est le chemin et l'autre est le composant. Vous pouvez l'encapsuler. La méthode semblera plus simple, donc je ne le ferai pas ici
N'oubliez pas d'utiliser le. méthode concat pour se connecter, routes fixes et routes ajoutées dynamiquement, afin que le navigateur puisse revenir normalement lorsqu'il revient en arrière

//点击跳转
<template>
  <p>
    点击新增 动态路由: "secondRouter"
    <br>
    <el-button>新增动态路由</el-button>

  </p>
</template>

<script>
import router from &#39;vue-router&#39;
import {constantRouterMap} from &#39;@/router&#39;


export default {
  name: &#39;kk&#39;,
  mounted(){
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
    srouter(){
      let newRoutes=constantRouterMap.concat([{path:&#39;/secondRouter&#39;,
        component :resolve => require(["@/components/kk"], resolve )
      }])
      this.$router.addRoutes(newRoutes)
      this.$router.push({path:&#39;/secondRouter&#39;})
    }
  }
}
</script>

//跳转过去的component组件,xxx.vue
<template>
  <p>
    恭喜你，动态添加路由成功，浏览器的链接已经变化；

    </p>
<h3>无论你怎么刷新我都会留在当前页面</h3>
    <h3>并且点击浏览器回退键，我会跳到之前页面,不会循环</h3>

  
</template>

<script>
import router2 from &#39;@/router&#39;
import router from &#39;vue-router&#39;
export default {
  name: &#39;HelloWorld&#39;,
  mounted(){
      localStorage.setItem(&#39;new&#39;,JSON.stringify({&#39;path&#39;:&#39;/secondRouter&#39;,&#39;component&#39;:&#39;kk&#39;}))//保存路由
  },
  data () {
    return {
      msg: &#39;Welcome to Your Vue.js App&#39;
    }
  },
  methods:{
  }
}
</script>

Interception de route avantEach

Quand. en interceptant ici, il sera jugé s'il existe un nouvel itinéraire dynamique enregistré dans localStorage. Si tel est le cas, il sera jugé et traité logiquement, effacer les itinéraires enregistrés pour éviter d'entrer dans une boucle infinie.
Après être entré dans le premier niveau de jugement, vous devez juger à nouveau s'il s'agit d'un événement d'actualisation de page

import router from './router'
import { constantRouterMap } from '@/router' //router里的固定路由
router.beforeEach((to, from, next) => {
  if (localStorage.getItem('new')) {
    var c = JSON.parse(localStorage.getItem('new')),
    lastUrl=getLastUrl(window.location.href,'/');

    if (c.path==lastUrl) { //动态路由页面的刷新事件
      let newRoutes = constantRouterMap.concat([{
        path: c.path,
        component: resolve => require(["@/components/" + c.component + ""], resolve)
      }])
      localStorage.removeItem('new')
      router.addRoutes(newRoutes)
      router.replace(c.path) //replace,保证浏览器回退的时候能直接返回到上个页面，不会叠加

    } 
  } 
  next()

})

var getLastUrl=(str,yourStr)=>str.slice(str.lastIndexOf(yourStr))//取到浏览器出现网址的最后"/"出现的后边的字符

ps :Au début, je pensais que l'itinéraire ne pouvait pas correspondre et passez à la requête 404. Traitez-le ici dans l'interception, mais constatez plus tard que ce n'est pas du tout nécessaire. Ajoutez simplement les deux paragraphes suivants lors de l'enregistrement de l'itinéraire :

export const constantRouterMap = [{
    path: '/',
    component: HelloWorld
  }, 
  {//404
    path: '/404',
    component: ErrPage
  },
  { //重定向到404
      path: '*', redirect: '/404' }
]

L'idée générale est probablement la suivante. , principalement en utilisant les données d'interception beforeEach + localStorage. Il peut être complété en le stockant, addRoutes ajoute dynamiquement la fonction de rafraîchissement de l'itinéraire sans invalidation.
Veuillez me corriger pour toute lacune

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

routeur vue : correspondance d'itinéraire dynamique correspondance d'itinéraire dynamique

Utilisez mixin pour écrire des plug-ins pour vos propres créations Plug-ins de communication des composants Vue

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!