Vue-router是Vue.js官方提供的用于實(shí)現(xiàn)路由功能的插件。Vue-router通過將URL映射到組件來實(shí)現(xiàn)SPA（單頁(yè)應(yīng)用）的切換效果，可以實(shí)現(xiàn)頁(yè)面的無刷新跳轉(zhuǎn)和前進(jìn)后退。

使用Vue-router，我們需要在Vue的組件中定義路由。路由的定義包括一個(gè)路徑和對(duì)應(yīng)的組件。我們可以使用Vue-router的路由構(gòu)造函數(shù)來創(chuàng)建路由對(duì)象，然后將其傳入Vue實(shí)例中。

// 創(chuàng)建路由對(duì)象
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
routes
})
// 將路由對(duì)象傳入Vue實(shí)例中
const app = new Vue({
router
}).$mount('#app')

在Vue組件中使用路由時(shí)需要使用Vue-router提供的組件來實(shí)現(xiàn)跳轉(zhuǎn)。這些組件包括router-link和router-view。router-link用于生成鏈接，router-view用于展示路由對(duì)應(yīng)的組件。

通過上述代碼，我們就定義好了一個(gè)簡(jiǎn)單的路由。當(dāng)用戶點(diǎn)擊不同的路由鏈接時(shí)，Vue-router會(huì)自動(dòng)加載對(duì)應(yīng)的組件并顯示到router-view中。這樣，我們就可以輕松地實(shí)現(xiàn)單頁(yè)應(yīng)用的路由切換效果了。