當你使用Vue來構建單頁應用時，Vue Router是必不可少的。Vue Router允許您通過URL路徑來管理應用程序的不同狀態，包括頁面組件，頁面標題和導航條等。在本文中，我們將探討Vue Router加載時的工作原理。

Vue Router的核心是一個名為“路由器”的Vue實例。這個實例管理著應用程序的路由并且提供了很多有用的方法，能夠方便地在組件之間進行導航切換。當Vue Router加載時，它會根據URL路徑來確定需要加載哪個組件。Vue Router通過監視URL的改變使得整個過程成為可能。

const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
})
const app = new Vue({
router
}).$mount('#app')

以上代碼中，“路由器”實例中的“routes”屬性定義了所有可能的URL路徑以及對應的組件。當用戶導航到某個路徑時，Vue Router將會通過這個配置來管理URL和組件之間的映射關系。

在頁面加載時，Vue Router會自動檢查URL路徑并加載對應的組件。Vue Router會把組件掛載到指定的router-view元素中，以達到無刷新的頁面效果。這個過程是Vue Router在啟動時自動完成的。

在加載完成后，Vue Router會在router對象中提供了幾個有用的屬性和方法，其中最重要的是$route。這個屬性包含了當前路由的信息，包括路徑，參數和查詢參數等。

export default {
mounted() {
console.log(this.$route.path)
console.log(this.$route.params)
console.log(this.$route.query)
}
}

在上面的例子中，“mounted”生命周期鉤子函數中通過訪問$route屬性來獲取當前路由的信息。從中我們可以根據路徑、參數和查詢參數來做出不同的處理，從而實現動態的頁面交互效果。

總之，Vue Router加載時是一個非常重要的過程。Vue Router通過URL路徑和組件之間的映射來管理路由，使得我們可以輕松地實現不同頁面之間的切換效果。而且，通過使用$route屬性，我們可以動態地獲取當前路由的信息，實現更強大的交互效果。我們希望本文可以幫助你更好地理解Vue Router加載時的過程。