Maison > Article > interface Web > vue router : correspondance d'itinéraire dynamique correspondance d'itinéraire dynamique
Cet article présente principalement vue router : la correspondance d'itinéraire dynamique. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Récemment, j'ai mis plusieurs Vue Single. Les applications de plusieurs pages sont fusionnées et mises à niveau en applications multipages pour réduire la redondance du code et les emballages répétés. Puisqu'il est intégré à la structure originale de Django et à la configuration de Vue-cli, de nombreuses modifications de configuration seront apportées pour correspondre à Django. Il n'est pas universellement portable et est uniquement à titre de référence.
La fosse se remplira petit à petit, commençons par le routage. L'idée principale est qu'une entrée correspond à une application monopage. Chaque application monopage est indépendante et il n'y a pas de sauts de routage entre eux. Dans une application monopage, il y a des sauts de routage entre plusieurs composants, donc chacun est unique. -page application Les applications de page ont leur propre configuration de routage. La
Correspondance dynamique d'itinéraires consiste à mapper tous les itinéraires correspondant à un certain modèle au même composant.
Selon les exemples donnés dans les documents officiels, par exemple, nous avons un composant RequestList qui contient les informations de base de toutes les demandes. Cliquez sur l'ID d'une demande pour accéder aux informations détaillées de la demande. Pour tous les ID avec des requêtes différentes, les requêtes peuvent être rendues à l'aide du composant RequestDetail, et l'effet peut être obtenu via des "paramètres de chemin dynamique (segment dynamique)".
De cette façon, /demo/request/1 et /demo/request/2 seront mappés sur la même route. Les paramètres sont transmis au composant RequestDetail via la route. Les paramètres transmis sont accessibles via this.$route.params. ou plusieurs.
import RequestList from '@/components/RequestList';
import RequestDetail from '@/components/RequestDetail';
export default {
base: '/demo/',
mode: 'history',
linkActiveClass: 'active',
routes: [
{
path: '/',
name: 'requestList',
component: RequestList,
},
{
path: '/request/:requestId',
name: 'requestDetail',
component: RequestDetail,
props: props, //路由传参
},
],
};
Parfois, il peut également être configuré comme une route avec des paramètres de requête, mais j'ai personnellement l'impression qu'une telle route /demo/request?requestId=1 n'est pas très belle et expose les paramètres à l'utilisateur.
{
path: '/request',
name: 'requestDetail',
component: RequestDetail,
props: route => ({ requestId: route.query.requestId }), //路由传参
},
Cette semaine, j'ai ajouté une nouvelle application monopage à l'application multipage et configuré le routage dynamique Dans le mode de développement dev, elle ne peut correspondre qu'à la route racine /, et. c'est toujours cannot getSous-route, rien ne peut être rendu. Au début, je n'ai pas trouvé les mots-clés appropriés pour rechercher des problèmes connexes. Après avoir longtemps lutté, j'ai finalement découvert que quelqu'un avait rencontré le même problème. Pourquoi-vue-router-webpack-dev-server-shows-. impossible d'obtenir le chemin lors de l'actualisation de la page.
Il s'avère que c'était un bug dans le modèle Vue webpack sous Windows
Ok, très bien :)
En fait, ce bug est dans la Vue actuelle a été résolue dans le modèle webpack. Il y a webpack.dev.conf.js dans la configuration devServer de historyApiFallback Lorsque nous utilisons l'API d'historique HTML5, index.html sera renvoyé lorsque la ressource 404 est introuvable. voici Quoi ?
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
En mode développement développeur, cela équivaut en fait à configurer un serveur virtuel localement. Une application monopage correspond à un fichier modèle html, et l'entrée correspond au js. css de tous les composants associés. Le code sera injecté dans ce fichier modèle html, donc notre configuration de routage doit également être analysée et mise en correspondance par le code js dans le fichier modèle correspondant. Mais en raison de la configuration de mon application multipage, lorsque je saisis /demo/request/1 dans la barre d'adresse, je ne trouve pas réellement la ressource correspondante dont j'ai besoin pour revenir au fichier modèle html correspondant, qui est également le même que le modèle. fichier configuré par votre chemin de développement associé.
devServer: {
historyApiFallback: {
rewrites: [
{ from: /^\/demo/, to: path.posix.join(config.dev.assetsPublicPath, 'demo/index.html') },
{ from: /^\/test/, to: path.posix.join(config.dev.assetsPublicPath, 'test/index.html') },
],
},
}
De nombreux nouveaux arrivants front-end choisiront d'utiliser Vue-cli pour créer des projets lors de leur premier contact avec Vue. La configuration du modèle est configurable dans une certaine mesure et est complète, ce qui est. Assez pour répondre aux besoins des applications générales d'une seule page, cela évite vraiment les ennuis. Cependant, le front-end ne se concentre plus uniquement sur le code, mais également sur la conception de l'ensemble de l'architecture du projet. Une bonne structure équivaut à la moitié de la bataille, et le processus de développement ultérieur sera très fluide.
Le front-end n'est pas aussi simple que l'imaginent les profanes, même s'il n'est pas très compliqué. Positionnez-vous en tant qu'architecte front-end, pas en tant que porteur de code. Par conséquent, il est fortement recommandé à tous ceux qui souhaitent approfondir le front-end d'interpréter et de redresser la configuration Webpack de Vue-cli (la même chose est vraie pour React), puis de parcourir complètement la documentation du webpack. divisez essentiellement le fractionnement du code d'ingénierie frontal (Code Splitting) et je comprends la plupart du Lazy Loading, puis essayez d'écrire la configuration et de concevoir l'architecture moi-même.
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Configuration|electron+vue+ts +sqlite méthode de configuration
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!