recherche

Maison  >  Article  >  interface Web  >  Implémenter plusieurs implémentations de routage dans Vue-Router2.X

Implémenter plusieurs implémentations de routage dans Vue-Router2.X

亚连
亚连original
2018-06-06 16:03:131576parcourir

Je vais maintenant partager avec vous un résumé des différentes méthodes d'implémentation de routage de Vue-Router2.X. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

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. Définir les composants, utilisez ici l'importation à partir d'autres fichiers 

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

2. Définir les itinéraires 

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

3. Créez une instance de routeur, puis transmettez la configuration des routes 

const router = new VueRouter({
 routes
})

4. Créez et montez l'instance racine. Injectez 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 896ed4a4b7d92085d8a5871a0f7d6f27dd6e4ababe59793a4ac75fb9e5c5550e

Ensuite, App.vue devrait écrire comme ceci : 

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>
index.html里呢要这样写：
<body>
 <p id="app"></p>
</body>

Ceci La page rendue sera monté sur le p avec l'identifiant de l'application.

2. Redirection de redirection

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

3. Vous pouvez accéder au composant d'information via /index/info

const routes = [
 { path: &#39;/index&#39;, component: index,
  children: [
   { path: &#39;info&#39;, component: info}
  ]
  }
]

4. Chargement paresseux

Avec paresseux. chargement, vous ne chargerez pas tous les composants en même temps, mais chargerez uniquement ce composant lorsque vous y accéderez. Pour les applications comportant de nombreux composants, la première vitesse de chargement sera améliorée. 

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

5. b988a8fd72e5e0e42afffd18f951b277

Dans vue-router 2, b988a8fd72e5e0e42afffd18f951b277

<!-- 字符串 -->
<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, correspondant au chemin de la route actuelle, toujours résolue en 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 :

Le ci-dessus, c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir. 

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(&#39;#app&#39;)
Articles associés :

Comment intégrer vue dans le projet jquery/bootstrap ?

Cliquez sur le numéro de page pour modifier le contenu de la page dans la pagination dans vue.js

Comment implémenter le transfert de valeur et la communication dans vue2.0 composants

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：réagir au développement de projetsArticle suivant：réagir au développement de projets

Articles Liés

Voir plus