An example analysis of how Vue.js operates multiple routing areas on a single page

This article mainly introduces Vue.js single page multiple routingRelated information about detailed examples of regional operations. Friends in need can refer to

Single page multiple routing regional operations

If there are two or more areas in a page, you need to set the index.js of the route to operate the contents of these areas

App.vue Settings in 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>

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

The following settings are to exchange the two components for display when the url is /#/first location

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

The above is the detailed content of An example analysis of how Vue.js operates multiple routing areas on a single page. For more information, please follow other related articles on the PHP Chinese website!