Migration von Vue Router 0.7.x

Nur ​​Vue Router 2 ist mit Vue 2 kompatibel. Wenn Sie also Vue aktualisieren, müssen Sie auch Vue Router aktualisieren. Aus diesem Grund haben wir die Details des Migrationspfads in die Hauptdokumentation aufgenommen.
Ein vollständiges Tutorial zur Verwendung von Vue Router 2 finden Sie in der Vue Router-Dokumentation.

Verzeichnis

• Router Initialisieren

  • router.start

• Route Definition

  • router.map

  • ro uter.on

  • router.beforeEach

  • subRoutes

  • router.redirect

  • router.alias

  • Beliebig Routenattribut

  • Abfragearray [] in URL-Syntax

• Route Entspricht

  • einem oder mehreren benannten Parametern

• Link

  • V-Link

  • V-Link-aktiv

• Navigation programmieren

  • router.go

• Routing: Modi

  • Hashbang: falsch

  • Geschichte: wahr

  • Zusammenfassung: wahr

• Routing-Optionen: Sonstiges

  • ScrollPosition speichern

  • root

  • transitionOnLoad

  • suppressTransitionError

• Routenhaken

  • aktivieren

  • canActivate

  • deaktivieren

  • kannDeaktivieren

  • canReuse: false

  • data

  • $loadin gRouteData

Router Initialisierung

router.startrouter.start Ersatz

router.start({
  template: '<router-view></router-view>'
}, '#app')

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
})

new Vue({
  el: '#app',
  router: router,
  render: h => h('router-view')
})

zu finden angerufen.

router.maprouter.map

ersetztroutes

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

var router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

router.on ^{Entfernen Sie}

wenn Sie es beim Starten der App übergeben müssen Code generiert Routen, und Sie können dies tun, indem Sie Definitionen dynamisch an das Routen-Array übertragen. Zum Beispiel:

// 普通的路由
var routes = [
  // ...
]

// 动态生成的路由
marketingPages.forEach(function (page) {
  routes.push({
    path: '/marketing/' + page.slug
    component: {
      extends: MarketingComponent
      data: function () {
        return { page: page }
      }
    }
  })
})

var router = new Router({
  routes: routes
})

Wenn Sie nach der Instanziierung des Routers eine neue Route hinzufügen müssen, können Sie „router“ eingeben Ändern Sie die ursprüngliche Matching-Methode in eine Matching-Methode, die Ihre neu hinzugefügte Route einschließt:

router.match = createMatcher(
  [{
    path: '/my/new/path',
    component: MyComponent
  }].concat(router.options.routes)
)

router.beforeEachrouter.beforeEach geändert

router.beforeEachnext

funktioniert jetzt asynchron und verwendet eine
-Funktion als drittes Argument.

router.beforeEach(function (transition) {
  if (transition.to.path === '/forbidden') {
    transition.abort()
  } else {
    transition.next()
  }
})

subRoutessubRoutes

Umbenennenchildren

um. Führen Sie die < aus 🎜>Migrationsassistent
, um ein Beispiel für die Option

router.redirectrouter.redirect

routes

router.beforeEach(function (to, from, next) {
  if (to.path === '/forbidden') {
    next(false)
  } else {
    next()
  }
})

router.redirect({
  '/tos': '/terms-of-service'
})

router.alias ^Ersetzen

Jetzt ist es Ihr Ort, um Alias-Operationen durchzuführen Eine Option in der Routendefinition. Beispielsweise müssen Sie Folgendes konfigurieren: routes

{
  path: '/tos',
  redirect: '/terms-of-service'
}

-Definition wie folgt:

router.alias({
  '/manage': '/admin'
})

Wenn Sie mehrere Aliase verwenden müssen Operation: Sie können auch eine Array-Syntax verwenden, um Folgendes zu implementieren:

{
  path: '/admin',
  component: AdminPanel,
  alias: '/manage'
}

Beliebiges Routenattribut ^ersetzt

Jetzt beliebig Die Route Das Attribut muss im Geltungsbereich des neuen Metaattributs liegen, um Konflikte mit zukünftigen neuen Funktionen zu vermeiden. Wenn Sie es beispielsweise zuvor so definiert haben:

alias: ['/manage', '/administer', '/administrate']

, müssen Sie es jetzt aktualisieren auf:

'/admin': {
  component: AdminPanel,
  requiresAuth: true
}

Wenn Sie über eine Route auf eine Eigenschaft zugreifen, übergeben Sie weiterhin meta . Zum Beispiel:

{
  path: '/admin',
  component: AdminPanel,
  meta: {
    requiresAuth: true
  }
}

Abfrage-Array[]-Syntax in URL^Entfernen

Bei der Übergabe des Arrays an den Abfrageparameter , lautet die URL-Syntax nicht mehr /foo?users[]=Tom&users[]=Jerry, sondern die neue Syntax /foo?users=Tom&users=Jerry, zu diesem Zeitpunkt ist $route.query.users immer noch ein Array, aber wenn die Abfrage nur einen Parameter enthält: /foo?users=Tom, weiß vue-router beim direkten Zugriff auf die Route nicht, dass der von uns erwartete Benutzer ein ist Array. Erwägen Sie daher, eine berechnete Eigenschaft hinzuzufügen und sie überall dort zu ersetzen, wo Sie $route.query.users verwenden:

if (route.meta.requiresAuth) {
  // ...
}

Routenübereinstimmungen

Routenabgleich wird jetzt verwendet path-to-regexp-Paket, das das Arbeiten flexibler als zuvor macht.

Ein oder mehrere benannte Parameter ^{ändert die Syntax von}

geringfügig, sodass /category/*tags als Beispiel auf /category/:tags aktualisiert werden sollte.

Links

v-linkv-link Die Replacement

v-link<router-link>-Direktive wurde durch eine neue

Komponenten-

export default {
  // ...
  computed: {
    // 此计算属性将始终是个数组
    users () {
      const users = this.$route.query.users
      return Array.isArray(users) ? users : [users]
    }
  }
}

<a v-link="'/about'">About</a>

v-link-active ^ersetzt

v-link-active auch weil man in < angegeben ist 🎜> Tag auf Komponente <router-link> Das Attribut ist veraltet. Beispielsweise müssen Sie Folgendes aktualisieren:

<router-link to="/about">About</router-link>

<li v-link-active>
  <a v-link="'/about'">About</a>
</li>

Das Tag wird zu einem echten Link (und kann den richtigen Sprung erhalten), ist jedoch aktiviert Die Klasse wird auf das äußere <a>-Tag angewendet. <li>

Navigation programmieren

router.gorouter.go Änderungen

Um die Konsistenz mit der router.goHTML5 History API aufrechtzuerhalten, wurde als verwendet Rückwärts-/Vorwärtsnavigation router.push,

Routing: Modi

hashbang: falseHashbang: false Entfernen

zu finden.

history: trueVerlauf: wahr

Ersetztmode

<router-link tag="li" to="/about">
  <a>About</a>
</router-link>

var router = new VueRouter({
  history: 'true'
})

Ausführen
Migration Helper

. abstract: true

mode

var router = new VueRouter({
  mode: 'history'
})

var router = new VueRouter({
  abstract: 'true'
})

Routenoptionen: Sonstiges

saveScrollPositionsaveScrollPosition Ersatz

scrollBehavior Es wurde durch die

Option

var router = new VueRouter({
  mode: 'abstract'
})

saveScrollPosition: true

zu finden.

rootroot

Umbenannt<base>base

Führen Sie den
Migrationsassistenten

zu finden. transitionOnLoad

appear

suppressTransitionError ^Entfernt

wurde entfernt, um den Haken zu vereinfachen. Wenn Sie Übergangsfehler wirklich unterdrücken müssen, können Sie stattdessen try…catch verwenden.

Routenhaken

activateaktivieren Ersetzen

beforeRouteEnterVerwenden Sie

-Hook zu finden.

canActivatecanActivate

Ersetzen beforeEnter

deactivate ^Entfernen

Verwenden beforeDestroy Oder destroyed Haken als Alternative.

canDeactivatecanDeactivate Ersetzen

beforeRouteLeave Verwenden Sie

-Hook zu finden.

canReuse: falsecanReuse: false

Führen Sie den
Migrationsassistenten

zu finden. data

$route

scrollBehavior: function (to, from, savedPosition) {
  return savedPosition || { x: 0, y: 0 }
}

$loadingRouteData ^Entfernen

Definieren Sie Ihre eigenen Eigenschaften (zum Beispiel: isLoading) und aktualisieren Sie dann den Ladestatus im Watcher auf der Route. Wenn Sie beispielsweise axios verwenden, um Daten abzurufen:

watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData: function () {
    // ...
  }
}