Eine kurze Einführung in $router und $route in Vue (mit Beispielen)

Dieser Artikel bietet Ihnen eine kurze Einführung in $router und $route in Vue. Ich hoffe, dass er für Freunde hilfreich ist.

Grundkonzept des Routings

Route, es ist eine Route.

{ path: '/home', component: Home }

Routen ist eine Gruppe von Routen.

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

Router kann als Container oder Mechanismus verstanden werden, der eine Gruppe von Routen verwaltet. Einfach ausgedrückt: Route ordnet nur URLs und Funktionen zu. Nach dem Empfang einer URL wird in der Routing-Mapping-Tabelle nach der entsprechenden Funktion gesucht.

    const router = new VueRouter({
          routes // routes: routes 的简写
    })

In VUE ist

$route das aktuelle Router-Jump-Objekt, das Namen, Pfad, Abfrage, Parameter usw. erhalten kann.

$router ist eine VueRouter-Instanz. Wenn Sie zu einer anderen URL navigieren möchten, verwenden Sie die Methode $router.push. Wie oben erwähnt, verwaltet $router hier Routing-Sprünge. Im Englischen deutet die Endung von er auf eine Art Person hin. Hier kann man sich das als Manager vorstellen, der kontrolliert, wohin die Route geht (push, go), was es einfacher macht erinnern.

Routensprung

1 Sie können den vollständigen Pfad handschriftlich eingeben:

this.$router.push({path:`/user/${userId}`})

Diese Methode erfordert die folgende Konfiguration im Routing

{
     path: '/user/:userId',
     name: '***',
     component: ***
   }

Diese Art, Parameter zu empfangen, ist diese.$route.params.userId.

2 Sie können auch Parameter zum Übergeben verwenden:

this.$router.push({name:'Login',params:{id:'leelei'}})
//不带参数 变成 ip/login

3 Sie können auch Abfragen zum Übergeben verwenden:

this.$router.push({path:'/login',query:{id:'leelei'})
//带查询参数变成 ip/login?id=leelei
//带斜杠/代表从根目录出发，不会嵌套之前的路径

Abfrageparameter gelten für den Pfad und Parameterparameter für den Namen . . Die Methoden zum Empfangen von Parametern sind ähnlich. . this.$route.query. und this.$route.params.

Beachten Sie, dass dies nur eine Sprung-URL ist. Welche Komponenten beim Springen zu dieser URL angezeigt werden, muss konfiguriert werden. Die Regeln für den Router-Sprung und den

Einige Dinge, die Sie beachten sollten

Wenn Sie Abfragen zum Übergeben von Parametern verwenden, werden Sie feststellen, dass die in der URL-Leiste des Browsers übergebenen Parameter denen von Get-Anfragen ähneln params zum Übergeben von Parametern. Andernfalls wird dies nicht der Fall sein, ähnlich wie bei einer Post-Anfrage.

Wenn ein Pfad angegeben wird, werden Parameter ignoriert (d. h. wenn Sie Parameter zum Übergeben von Parametern verwenden möchten, müssen Sie den Namen verwenden), dies ist jedoch bei Abfragen nicht der Fall. Wenn Sie den vollständigen Pfad und die Abfrageparameter zum Übergeben verwenden, gehen die über die Route übergebenen Parameter beim Aktualisieren der Seite nicht verloren.

Der Unterschied zwischen router.push und router.replace fügt keine neuen Datensätze zum Verlauf hinzu, sondern ersetzt die aktuellen Verlaufseinträge. Das heißt, die Schaltfläche „Zurück“ der Webseite, zu der mit „Ersetzen“ gesprungen wird, kann nicht angeklickt werden.

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in $router und $route in Vue (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!