Un exemple d'analyse de la façon dont Vue.js exploite plusieurs zones de routage sur une seule page

Cet article présente principalement des informations pertinentes sur les opérations régionales de routage multiples sur une seule page de Vue.js et des exemples détaillés. Les amis dans le besoin peuvent se référer aux

Opérations régionales de routage multiple sur une seule page

.

S'il y a deux zones ou plus dans une page, vous devez définir l'index.js de l'itinéraire pour exploiter le contenu de ces zones

App.vue Paramètres dans index.js :

<router-view></router-view>
<router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></router-view>
<router-view name="right" style="float: left;width: 50%; height: 300px;background-color: #898;"></router-view>

Paramètres dans index.js :

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import First1 from '@/components/first1'
import First2 from '@/components/first2'

Vue.use(Router)

export default new Router ({
 routes : [
  {
   path : '/',
   name : 'Hello',
   components : {
    default : Hello,
    left : First1,
    right : First2
   }
  }
 ]
})

Les paramètres suivants sont échangés lorsque l'URL est /# /first La position où les deux composants sont affichés

export default new Router ({
 routes : [
  {
   path : '/',
   name : 'Hello',
   components : {
    default : Hello,
    left : First1,
    right : First2
   }
  }, {
   path : '/first',
   name : 'First',
   components : {
    default : Hello,
    left : First2,
    right : First1
   }   
  }
 ]
})

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!