Vue.js가 단일 페이지에서 여러 라우팅 영역을 작동하는 방법에 대한 분석 예

이 글에서는 Vue.js 단일 페이지 다중 라우팅 영역 작업에 대한 자세한 예에 대한 관련 정보를 주로 소개합니다. 필요한 친구는 한 페이지에 두 개 이상이 있는 경우

단일 페이지 다중 라우팅 영역 작업

을 참조할 수 있습니다. 975b587bf85a482ea10b0a28848e78a4 영역은 경로의 index.js를 설정하여 이러한 영역의 콘텐츠를 작동해야 합니다.

App.vue 설정:

<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>

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
   }
  }
 ]
})

다음은 설정은 URL이 /#/first

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
   }   
  }
 ]
})

일 때 두 구성요소의 표시 위치를 바꾸는 것입니다.

위 내용은 Vue.js가 단일 페이지에서 여러 라우팅 영역을 작동하는 방법에 대한 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!