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 daspath
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:'BookInfo',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 lautetpath: '/books/version/:id'
, das entsprechendeparams
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), dhcreated 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 :{ '$route' (to,from){ alert(to.params.id); } } }; </script>
$route.params
Die definierten Parameter müssen Teil der gesamten Route seinvue-router
ermöglicht uns auch die Verwendung von"/path?param = value"
zur Übergabe von Parametern$route.query.参数名
Parameterwert abrufenvue-router
bietet auch eine konstante Parameterdefinitionmeta
Wir können zuerst den Wert vonmeta
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 daspath
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:'BookInfo',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 lautetpath: '/books/version/:id'
, das entsprechendeparams
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 :{ '$route' (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
相关推荐:
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!