Wie löst Vue das Problem des Aktualisierungsfehlers, nachdem addRoutes Routen dynamisch hinzugefügt hat?

Dieser Artikel stellt hauptsächlich vor, wie Vue das Problem des Aktualisierungsfehlers nach dem Hinzufügen von Routen löst, die von addRoutes dynamisch hinzugefügt wurden. Jetzt kann ich es mit Ihnen teilen.

Vorwort

In einigen Szenarien müssen wir addRoutes verwenden, um Routen dynamisch hinzuzufügen, aber nach der Aktualisierung werden sie ungültig. Ich bin vor einiger Zeit im Projekt auf dieses Anwendungsszenario gestoßen, also habe ich mir die Zeit genommen, es zu studieren Teilen Sie es und zeichnen Sie es auf. Bitte korrigieren Sie mich, wenn ich falsch liege.
Anwendungsszenario: Benutzer A meldet sich am System an und es gibt eine Schaltfläche auf der Seite Nach dem Klicken wird die Route dynamisch hinzugefügt und . Der Benutzer wird ebenfalls aktualisiert. Wenn Sie nicht auf diese Schaltfläche klicken und die Adresse im Browser eingeben, springt der Benutzer zur 404-Seite

github:https://github.com/Mrblackant...
Online ansehen:http://an888.net/router/keepR...

Idee

1 Klicken Sie auf die Schaltfläche und verwenden Sie addRutes, um Routen dynamisch hinzuzufügen und zu springen.
2. Wenn der Benutzer die neu aufgerufene Seite aktualisiert, verwenden Sie beforeEach, um sie abzufangen und zu beurteilen. und es wird beurteilt, dass die neue Seite nur ein Aktualisierungsereignis ist. Fügen Sie dann die zuvor gespeicherte Route hinzu. Kommen Sie herein;

Code

1 Klicken Sie auf die Schaltfläche, speichern Sie die Route und springen Sie

(1). Deklarieren Sie eines im router/index.js-Array, das einige feste Routen enthält, wie z. B. Ihre Anmeldeseite, 404 usw.

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

(2). Klicken Sie auf die Schaltfläche, um zu springen und die Route zu speichern. Der Schritt besteht darin, die Komponente einzugeben, zu der Sie springen möchten. Dies dient dazu, eine Endlosschleife im beforeEach-Interception zu verhindern 🎜> Zum Hinzufügen einer Route sind zwei Punkte erforderlich. Der andere ist die Komponente. Sie können ihn in einer Methode kapseln. Das wird einfacher, wenn ich es mir anschaue.
Denken Sie daran, die Concat-Methode für Verbindungen, feste Routen und dynamisch hinzugefügte Routen zu verwenden, damit der Browser beim Rollback normal zurückkehren kann

//点击跳转
<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>

Routenabfangen vor jedem

Beim Abfangen wird hier beurteilt, ob eine neue dynamische Route im lokalen Speicher gespeichert ist. Wenn ja, wird sie beurteilt und logisch verarbeitet. Nach der Verarbeitung werden die gespeicherten Routen gelöscht, um das Eintreten in eine Endlosschleife zu verhindern. Nachdem Sie die erste Beurteilungsebene betreten haben, müssen Sie erneut beurteilen, ob es sich um ein Seitenaktualisierungsereignis handelt

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:
Zuerst dachte ich, dass die Route nicht übereinstimmen kann und das 404-Sprung wird hier abgefangen, aber später festgestellt, dass dies überhaupt nicht notwendig ist. Fügen Sie einfach die folgenden zwei Absätze hinzu, wenn Sie die Route registrieren:

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

Die Gesamtidee ist wahrscheinlich so, hauptsächlich mit beforeEach Interception + LocalStorage-Datenspeicherung, Sie können Abschließen, addRoutes fügt die Routenaktualisierungsfunktion dynamisch ohne Ungültigmachung hinzu. Bitte korrigieren Sie mich bei etwaigen Mängeln

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Vue-Router: dynamische Routenanpassung, dynamische Routenanpassung

Verwenden Sie Mixin, um selbst erstellte Plug-Ins zu schreiben Kommunikations-Plug-ins für Vue-Komponenten

Das obige ist der detaillierte Inhalt vonWie löst Vue das Problem des Aktualisierungsfehlers, nachdem addRoutes Routen dynamisch hinzugefügt hat?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!