Maison > Article > interface Web > Vue-Router2 implémente l'explication d'un exemple de fonction de routage

Vue-Router2 implémente l'explication d'un exemple de fonction de routage

小云云original: 2018-05-18 15:41:581695parcourir

vue-router est le plug-in de routage officiel de Vue.js. Il est profondément intégré à vue.js et convient à la création d'applications d'une seule page. L'application monopage de Vue est basée sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et cartographier les chemins et les composants. Les applications de pages traditionnelles utilisent certains hyperliens pour effectuer des changements de page et des sauts. Dans l'application monopage vue-router, il s'agit de basculer entre les chemins, c'est-à-dire de changer de composants.

Remarque : vue-router 2 n'est applicable qu'à la version Vue2.x. Ci-dessous, nous expliquerons comment utiliser vue-router 2 pour implémenter la fonction de routage basée sur vue2.0.

Il est recommandé d'utiliser npm pour l'installation.

npm install vue-router

1. Utiliser le routage

Dans main.js, vous devez installer explicitement la fonction de routage :

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

1. ici à partir d'autres fichiers importés dans

import index from './components/index.vue'
import hello from './components/hello.vue'

2 Définir les routes

const routes = [
 { path: '/index', component: index },
 { path: '/hello', component: hello },
]

3 Créer une instance de routeur, puis transmettre la configuration des routes

const router = new VueRouter({
 routes
})

. 4. Créez et montez l'exemple racine. Injecter des routes via les paramètres de configuration du routeur, afin que l'ensemble de l'application dispose de fonctions de routage

const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

Après la configuration ci-dessus, les composants correspondant à la route seront rendus dans la

Ensuite, il devrait être écrit comme ceci dans App.vue :

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>

index.html devrait être écrit comme ceci :

<body>
 <p id="app"></p>
</body>

Cela montera la page rendue sur le p avec l'identifiant de l'application.

2. Redirection de redirection

const routes = [
 { path: '/', redirect: '/index'},  // 这样进/ 就会跳转到/index
 { path: '/index', component: index }
]

3. Routage imbriqué

const routes = [
 { path: '/index', component: index,
  children: [
   { path: 'info', component: info}
  ]
  }
]

Le composant info est accessible via /index/info

4. . Chargement paresseux

const routes = [
 { path: '/index', component: resolve => require(['./index.vue'], resolve) },
 { path: '/hello', component: resolve => require(['./hello.vue'], resolve) },
]

Grâce au chargement paresseux, tous les composants ne seront pas chargés en même temps, mais ce n'est que lorsque vous accéderez à ce composant qu'il sera chargé. Pour les applications comportant de nombreux composants, la première vitesse de chargement sera améliorée.

Dans vue-router 1, utilisez

Dans vue-router 2, utilisez Remplacer la balise a dans la version 1

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="&#39;home&#39;">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="&#39;home&#39;">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: &#39;home&#39; }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: &#39;user&#39;, params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: &#39;register&#39;, query: { plan: &#39;private&#39; }}">Register</router-link>

6. Objet d'information de routage

1.$route.path

chaîne, Le chemin correspondant au courant la route est toujours résolue comme un chemin absolu, tel que "/foo/bar".

2.$route.params

Un objet clé/valeur, comprenant des fragments dynamiques et des fragments correspondants complets. S'il n'y a pas de paramètres de routage, c'est un objet vide.

3.$route.query

Un objet clé/valeur représentant les paramètres de requête d'URL. Par exemple, pour le chemin /foo?user=1, $route.query.user == 1, ou un objet vide s'il n'y a aucun paramètre de requête.

4.$route.hash

La valeur de hachage de la route actuelle (sans #), s'il n'y a pas de valeur de hachage, c'est une chaîne vide.

5.$route.fullPath

L'URL une fois l'analyse terminée, y compris le chemin complet des paramètres de requête et du hachage.

6.$route.matched

Un tableau contenant les enregistrements de routage de tous les fragments de chemin imbriqués de l'itinéraire actuel. Les enregistrements de route sont des copies d'objets dans le tableau de configuration des routes (et dans le tableau enfants).

Sur la base de ce qui précède, un main.js comprenant la redirection, le routage imbriqué et le chargement différé est le suivant :

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
 routes:[
 { path: '/', redirect: '/index' },
 { path: '/index', component: resolve => require(['./components/index.vue'], resolve),
  children:[
   { path: 'info', component: resolve => require(['./components/info.vue'], resolve) }
  ]
 },
 { path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },
 ]
})
const app = new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

Recommandations associées :

Exemples détaillés d'URL thinkphp5 et de fonctions de routage

Méthode personnalisée Node.js pour implémenter la fonction de routage de fichiers

Exemples détaillés d'implémentation de routage par nodeJS fonctions

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'implémentation d'un plug-in de menu sympa dans VueArticle suivant：Explication détaillée de l'implémentation d'un plug-in de menu sympa dans Vue

Articles Liés

Voir plus