Vue-router是Vue.js的官方路由插件，可以實現(xiàn)SPA(單頁應(yīng)用)開發(fā)，通過URL的變化實現(xiàn)組件的切換。使用Vue-router需要先安裝Vue.js。

Vue-router的基本用法很簡單，我們首先要定義路由器對象，可以把它叫做路由模板，包含多個路由，每個路由對應(yīng)一個組件，例如：

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
routes // short for `routes: routes`
})

上面的代碼中定義了兩個路由：一個是根路徑'/'對應(yīng)的組件是Home，另一個是路徑'/about'對應(yīng)的組件是About。

除了上面的routes數(shù)組，Vue-router還提供了其他配置選項，例如：

const router = new VueRouter({
mode: 'history',
base: '/my-app/',
routes: [...]
})

其中mode表示路由模式，有兩個選項：hash和history，默認(rèn)是hash模式，這里選擇history模式；base表示應(yīng)用的基路徑，默認(rèn)是'/'；routes同上。

路由的切換是用戶在應(yīng)用中進(jìn)行的，可以用router-link組件生成HTML鏈接，在點擊后觸發(fā)路由切換，例如：

< template >< div >< router-link to="/" >Home< /router-link>< router-link to="/about" >About< /router-link>< router-view / >< /div>< /template >

上面的代碼中，使用了router-link標(biāo)簽生成兩個鏈接，分別指向根路徑和/about路徑；router-view標(biāo)簽則是用來渲染當(dāng)前路由對應(yīng)的組件。

在路由器對象中，還可以使用鉤子函數(shù)，用來在路由切換前或切換后對路由進(jìn)行處理。常見的鉤子函數(shù)有：beforeEach、beforeResolve和afterEach。例如：

router.beforeEach((to, from, next) =>{
// to和from代表即將進(jìn)入的和離開的路由對象
// next是一個函數(shù)，決定路由是否繼續(xù)向下切換，例如 next(false) 表示不切換
console.log(`Navigating to ${to.path} from ${from.path}`)
next()
})

上面的代碼中，定義了一個beforeEach函數(shù)，每次路由切換前會打印出即將進(jìn)入的路徑和離開的路徑。

最后，Vue-router還提供了一些高級功能，例如異步路由、嵌套路由、命名路由等等，可以根據(jù)需求靈活使用。