Router是Vue.js框架中的一個(gè)重要工具，它可以方便地實(shí)現(xiàn)單頁(yè)面應(yīng)用（SPA）的路由控制。使用Vue CLI創(chuàng)建項(xiàng)目后，我們可以在main.js文件引入Vue Router并進(jìn)行配置。

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

上述代碼首先導(dǎo)入Vue和Vue Router，并在Vue實(shí)例中使用Vue Router。在路由配置中，我們定義了兩個(gè)路由，一個(gè)指向根路徑'/'，另一個(gè)指向'/about'路徑。通過(guò)mode指定使用HTML5 History API，以消除#符號(hào)。

現(xiàn)在我們可以在App.vue中使用組件實(shí)現(xiàn)導(dǎo)航：

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

上述代碼中使用組件實(shí)現(xiàn)在兩個(gè)路由之間的導(dǎo)航。使用組件顯示當(dāng)前路由所對(duì)應(yīng)的組件。

最后，在組件中使用$route對(duì)象可以獲取當(dāng)前路由的信息：

<template>
<div>
The current route is {{ $route.path }}
</div>
</template>

上述代碼中使用$route.path獲取了當(dāng)前路由的路徑信息。