Explication détaillée des exemples de routage dynamique dans Vue.js

La fonction de navigation d'itinéraire implémentée dans l'article Utiliser vue-router pour effectuer des fonctions de navigation simples ne peut pas transmettre de paramètres, ce qui signifie qu'il s'agit d'un itinéraire statique. Étant donné que le mode de routage qui peut transmettre des paramètres peut transmettre des paramètres, le nombre d'itinéraires correspondants est incertain, c'est pourquoi on l'appelle routage dynamique.

Alors comment utiliser les paramètres comme routes ?

Ajoutez : devant le nom du paramètre, puis écrivez les paramètres dans le path de l'itinéraire

L'exemple suivant :

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

Après avoir été défini de cette manière, vue-router correspondra à tous : /books/1,/books/2,/books/3 ……, le nombre d'itinéraires ainsi définis est donc incertain.

Dans <router-link> nous ajoutons un attribut params pour spécifier la valeur spécifique du paramètre

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

Le lien ci-dessus correspond à : http://localhost:8080/__dirname/books / 1

Si vous devez transmettre plusieurs valeurs de paramètres, ajoutez simplement les paramètres selon la méthode de dénomination ci-dessus et transmettez la valeur de paramètre déclarée correspondante dans params vue-router doit uniquement correspondre au modèle de routage. . La définition décomposera automatiquement les paramètres et prendra des valeurs
. Par exemple, path: '/books/version/:id', le params correspondant est : params :{id:1,version:1}

Alors maintenant, nous sommes confrontés à ce problème - comment lire la valeur de ce paramètre à partir de l'itinéraire ?
Réponse : obtenez la valeur du paramètre spécifiée via l'attribut $route.params, tel que : this.$route.params.id,this.$route.params.msg

Si vous souhaitez afficher la valeur du paramètre dans la page du composant correspondant, le code correspondant est la suivante :

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

Si vous souhaitez effectuer le traitement correspondant en fonction des valeurs de paramètres dans le code js, ajoutez le code suivant à la route par défaut :

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

Lors de l'utilisation de paramètres de routage, tels que de /books/1 à /books/2, l'instance de composant d'origine sera réutilisée, car les deux routes restituent le même composant et le taux de réutilisation sera supérieur à celui de sa destruction et de sa recréation.
Cela signifie que le hook de cycle de vie du composant ne sera plus appelé (le composant n'est pas détruit puis créé), c'est-à-dire que created mounted et les autres fonctions de hook deviendront invalides lorsque la page sera chargée pour la deuxième fois.

Ensuite, lors de la réutilisation de composants, si vous souhaitez répondre aux modifications des paramètres de routage, vous devez ajouter une fonction de suivi des modifications de l'objet $watch au sein de l'objet $route

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

$route.params Les paramètres définis doivent faire partie de l'ensemble de l'itinéraire vue-router nous permet également d'utiliser "/path?param = value" pour transmettre des paramètres que vous pouvez utiliser. $route.query.参数名 Obtenir la valeur du paramètre
vue-router fournit également une définition de paramètre constante meta Nous pouvons d'abord définir la valeur de meta dans la définition de routage, puis obtenir la valeur constante spécifique via le paramètre $route.meta. dans l'instance de routage.

Le code suivant ($route.query.参数名)

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

Le code pour obtenir la valeur de bookName est this.$route.query.msg

Le code suivant ( $route.meta.参数名 )

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

Le code pour obtenir la valeur de bookName est this.$route.meta.bookName

La fonction de navigation d'itinéraire implémentée dans l'article en utilisant vue-router pour compléter la navigation simple la fonction ne peut pas transmettre de paramètres, c'est-à-dire qu'il s'agit d'une route statique.

Le mode de routage qui peut transmettre des paramètres, car les paramètres peuvent être transmis, le nombre d'itinéraires correspondants est incertain, on l'appelle donc routage dynamique

Et alors ? Qu’en est-il de l’utilisation de paramètres comme itinéraires ?

Ajoutez : devant le nom du paramètre, puis écrivez les paramètres dans le path de l'itinéraire

L'exemple suivant :

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

Après avoir été défini de cette manière, vue-router correspondra à tous : /books/1,/books/2,/books/3 ……, le nombre d'itinéraires ainsi définis est donc incertain.

Dans <router-link> nous ajoutons un attribut params pour spécifier la valeur spécifique du paramètre

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

Le lien ci-dessus correspond à : http://localhost:8080/__dirname/books / 1

Si vous devez transmettre plusieurs valeurs de paramètres, ajoutez simplement les paramètres selon la méthode de dénomination ci-dessus et transmettez la valeur de paramètre déclarée correspondante dans params vue-router doit uniquement correspondre au modèle de routage. . La définition décomposera automatiquement les paramètres et prendra des valeurs
. Par exemple, path: '/books/version/:id', le params correspondant est : params :{id:1,version:1}

Alors maintenant, nous sommes confrontés à ce problème - comment lire la valeur de ce paramètre à partir de l'itinéraire ?
Réponse : obtenez la valeur du paramètre spécifiée via l'attribut $route.params, tel que : this.$route.params.id,this.$route.params.msg

Si vous souhaitez afficher la valeur du paramètre dans la page du composant correspondant, le code correspondant est la suivante :

<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动态路由和嵌套路由实例详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!