Sub-routing is a feature that allows you to nest routes inside other routes to create more complex navigation setups in Vue 2.0. This feature is incredibly useful, allowing you to divide your application's functionality into smaller modules while also making it easier to navigate between them.

The sub-routing feature is commonly used when you have a large application with multiple functionalities and pages. It enables you to break those functionalities and pages down into smaller parts that can be loaded on different pages. This allows you to create a better, more organized user experience that makes it easier for users to find the information they need.

const router = new VueRouter({
routes: [
{
path: '/users',
component: Users,
children: [
{
path: 'profile',
component: Profile
},
{
path: 'settings',
component: Settings
}
]
}
]
})

The code above demonstrates how sub-routing can be used in Vue 2.0. Notice that we first define a parent route that maps to the Users component. Inside this parent route, we define two child routes, profile and settings, which both map to their respective components. The children property is what enables us to nest routes inside the parent route.

Another useful feature of sub-routing is the ability to dynamically load components. This is particularly useful if you have a large application with many components that are only needed in certain situations. By dynamically loading these components, you can significantly improve your application's performance by only loading what is needed when it is needed.

const router = new VueRouter({
routes: [
{
path: '/users/:id',
component: User,
children: [
{
path: '',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
},
{
path: 'comments',
component: UserComments
},
{
path: 'photos',
component: () =>import('./components/UserPhotos.vue')
}
]
}
]
})

The code above demonstrates how we can load a component dynamically using sub-routing. Notice that for the photos child route, we use a function that imports the component from a separate file. This allows us to only load the component when needed, significantly improving the application's performance.

Sub-routing in Vue 2.0 is a powerful feature that enables you to create complex navigation setups while also improving your application's performance. Whether you're building a simple task management application or a large e-commerce website, sub-routing can help you create a better user experience and organize your application's functionality more efficiently.