在Vue應用中，同級組件路由是一個非常有用的功能。它允許我們在同一級別的組件之間進行頁面導航而不改變URL地址。這個功能非常適合用于一些需要復雜頁面組合的情況，比如一張包括大量子頁面的儀表盤。

這個功能的實現，需要使用Vue Router。Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得更加容易。

在使用Vue Router之前，需要安裝和導入它：

npm install vue-router

或者，如果使用yarn：

yarn add vue-router

接下來，在需要使用Router的Vue的根實例中，導入router模塊并注冊：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})
new Vue({
router,
el: '#app'
})

這里，我們定義了兩個路由，'/'代表Home組件，'/about'代表About組件。這樣，在運行該應用時，就可以通過訪問'/about'來訪問About組件。

接下來，我們需要在同級組件中使用路由。我們可以在其中一個組件中加入以下代碼：

export default {
props: [
'title',
'description'
],
router: {
name: 'my-component',
path: '/my-component',
}
}

在這個組件中，我們定義了一個路由，其中包括組件的名字和路徑。因為這個組件與其他同級組件是在同一個級別，因此不需要在路由中嵌套它們。

我們還需要為其父組件包含一個路由容器：

<template>
<div>
<router-view></router-view>
</div>
</template>

這里，我們使用了Vue Router的<router-view>指令來允許路由容器可以容納子組件。

最后，我們需要創建一個路由鏈接，以便用戶可以單擊它來跳轉到相應同級組件。我們可以在Vue模板中包含以下內容：

<template>
<div>
<router-link to="/my-component">My Component</router-link>
</div>
</template>

這里，我們創建了一個路由鏈接，并指向我們之前定義的路由容器。這樣，在單擊這個鏈接時，Vue Router就會處理導航，并呈現出My Component組件。

總的來說，使用Vue Router的同級組件路由功能，可以讓我們更方便地組織和導航Vue應用程序中的頁面。無論我們需要在同一級別的組件之間快速切換，或者需要呈現復雜的頁面組合，Vue Router都可以為我們提供簡單而強大的解決方案。