Detaillierte Erläuterung der Beispiele für dynamisches Routing in Vue.js

Die im Artikel „Verwenden von Vue-Router zum Ausführen einer einfachen Navigationsfunktion“ implementierte Routennavigationsfunktion kann keine Parameter übergeben, was bedeutet, dass es sich um eine statische Route handelt. Da der Routing-Modus, der Parameter übergeben kann, Parameter übergeben kann, ist die Anzahl der entsprechenden Routen ungewiss und wird daher als dynamisches Routing bezeichnet.

Wie verwendet man also Parameter als Routen?

Fügen Sie : vor dem Parameternamen hinzu und schreiben Sie dann die Parameter in das path der Route

Das folgende Beispiel:

  routes: [    //将页面组件与path指令的路由关联
    { name: 'BookInfo', path: '/books/:id', component: BookInfo }
  ]

Nachdem vue-router auf diese Weise definiert wurde, stimmt es mit allen überein: /books/1,/books/2,/books/3 ……, daher ist die Anzahl der auf diese Weise definierten Routen ungewiss.

In <router-link> fügen wir ein params-Attribut hinzu, um den spezifischen Parameterwert anzugeben

        <li>
          <router-link :to ="{name:&#39;BookInfo&#39;,params :{id:1}}" >
            <p>首页</p>
          </router-link>
        </li>

Der obige Link entspricht: http://localhost:8080/__dirname/books / 1

Wenn Sie mehrere Parameterwerte übergeben müssen, fügen Sie einfach die Parameter gemäß der oben genannten Benennungsmethode hinzu und übergeben Sie den entsprechenden deklarierten Parameterwert in params. Der Router muss nur mit dem Routing-Muster übereinstimmen . Die Definition zerlegt die Parameter automatisch und übernimmt Werte
Zum Beispiel lautet path: '/books/version/:id', das entsprechende params lautet: params :{id:1,version:1}

Nun stehen wir also vor diesem Problem: Wie liest man diesen Parameterwert aus der Route?
Antwort: Rufen Sie den angegebenen Parameterwert über das Attribut $route.params ab, z. B.: this.$route.params.id,this.$route.params.msg

Wenn Sie den Parameterwert auf der entsprechenden Komponentenseite ausgeben möchten, verwenden Sie den entsprechenden Code lautet wie folgt:

<p>当前图书编号是：{{$route.params.id}}</p>

Wenn Sie eine entsprechende Verarbeitung basierend auf Parameterwerten im js-Code durchführen möchten, fügen Sie den folgenden Code zur Standardroute hinzu:

export default {  name: "app",  created() {    alert(this.$route.params.id);  }};

Bei Verwendung von Routing-Parametern, z. B. von /books/1 nach /books/2, wird die ursprüngliche Komponenteninstanz wiederverwendet, da beide Routen dieselbe Komponente rendern und die Wiederverwendungsrate höher ist als bei der Zerstörung und Neuerstellung.
Dies bedeutet, dass der Lebenszyklus-Hook der Komponente nicht mehr aufgerufen wird (die Komponente wird nicht zerstört und dann erstellt), dh created mounted und andere Hook-Funktionen werden beim Laden der Seite ungültig zum zweiten Mal.

Wenn Sie dann bei der Wiederverwendung von Komponenten auf Änderungen der Routing-Parameter reagieren möchten, müssen Sie eine Tracking-Funktion für Änderungen im $watch-Objekt innerhalb des $route-Objekts hinzufügen

<script>
export default {  name: "app",
  watch :{
    &#39;$route&#39; (to,from){
      alert(to.params.id);
    }
  }
};
</script>

$route.params Die definierten Parameter müssen Teil der gesamten Route sein vue-router ermöglicht uns auch die Verwendung von "/path?param = value" zur Übergabe von Parametern $route.query.参数名 Parameterwert abrufen
vue-router bietet auch eine konstante Parameterdefinition meta Wir können zuerst den Wert von meta in der Routing-Definition definieren und dann den spezifischen konstanten Wert über den Parameter $route.meta erhalten in der Routing-Instanz.

Der folgende Code ($route.query.参数名)

{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }

Der Code zum Erhalten des Werts von bookName ist this.$route.query.msg

Der folgende Code ( $route.meta.参数名 )

{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}

Der Code zum Erhalten des Werts von bookName lautet this.$route.meta.bookName

Die im Artikel implementierte Routennavigationsfunktion. Verwenden Sie den Vue-Router, um die einfache Navigation abzuschließen Die Funktion kann keine Parameter übergeben, das heißt, es handelt sich um eine statische Route.

Der Routing-Modus, der Parameter übergeben kann, da die Parameter übergeben werden können, ist die Anzahl der entsprechenden Routen ungewiss, daher wird er als dynamisches Routing

Na und? Wie wäre es mit der Verwendung von Parametern als Routen?

Fügen Sie : vor dem Parameternamen hinzu und schreiben Sie dann die Parameter in das path der Route

Das folgende Beispiel:

  routes: [    //将页面组件与path指令的路由关联
    { name: 'BookInfo', path: '/books/:id', component: BookInfo }
  ]

Nachdem vue-router auf diese Weise definiert wurde, stimmt es mit allen überein: /books/1,/books/2,/books/3 ……, daher ist die Anzahl der auf diese Weise definierten Routen ungewiss.

In <router-link> fügen wir ein params-Attribut hinzu, um den spezifischen Parameterwert anzugeben

        <li>
          <router-link :to ="{name:&#39;BookInfo&#39;,params :{id:1}}" >
            <p>首页</p>
          </router-link>
        </li>

Der obige Link entspricht: http://localhost:8080/__dirname/books / 1

Wenn Sie mehrere Parameterwerte übergeben müssen, fügen Sie einfach die Parameter gemäß der oben genannten Benennungsmethode hinzu und übergeben Sie den entsprechenden deklarierten Parameterwert in params. Der Router muss nur mit dem Routing-Muster übereinstimmen . Die Definition zerlegt die Parameter automatisch und nimmt Werte an
Beispielsweise lautet path: '/books/version/:id', das entsprechende params lautet: params :{id:1,version:1}

Nun stehen wir also vor diesem Problem – wie liest man diesen Parameterwert aus der Route?
Antwort: Rufen Sie den angegebenen Parameterwert über das Attribut $route.params ab, z. B.: this.$route.params.id,this.$route.params.msg

Wenn Sie den Parameterwert auf der entsprechenden Komponentenseite ausgeben möchten, verwenden Sie den entsprechenden Code lautet wie folgt:

<p>当前图书编号是：{{$route.params.id}}</p>

如果想在js代码中根据参数值做相应的处理，则在默认路由中加入如下代码：

export default {  name: "app",  created() {    alert(this.$route.params.id);  }};

当使用路由参数的时候，如 从/books/1 到 /books/2 ，原来的组件实例会被复用，因为两个路由都渲染同一个组件，比起销毁后再创建，复用的销率会更高。
这也就是说 组件的生命周期钩子不会再被调用(组件没有被销毁后再创建) ，即 created mounted 等钩子函数在页面第二次加载的时候回失效。

那么，当复用组件时候，想对路由参数的变化做出响应的话，就需要在 $watch 对象内添加对 $route 对象变化的跟踪函数

<script>
export default {  name: "app",
  watch :{
    &#39;$route&#39; (to,from){
      alert(to.params.id);
    }
  }
};
</script>

$route.params 定义的参数必然是整个路由的其中一部分，vue-router 还可以让我们使用 "/path?param = value" 的方式传递参数，可以使用$route.query.参数名 获取参数值
vue-router 还提供一种常量参数定义 meta，我们可以在路由定义中先定义 meta 的值，然后在路由实例中通过$route.meta 参数获取具体常量值。

如下代码（$route.query.参数名）

{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }

获取其中 bookName 的值的代码为 this.$route.query.msg

如下代码（$route.meta.参数名）

{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}

获取其中 bookName 的值的代码为 this.$route.meta.bookName

相关推荐：

vue router动态路由和嵌套路由实例详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispiele für dynamisches Routing in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!