Vue Router 是前端框架 Vue.js 中的一個非常重要的擴(kuò)展庫，它允許我們在單頁應(yīng)用程序中實(shí)現(xiàn)跨頁面的導(dǎo)航，為用戶提供扁平化的瀏覽體驗(yàn)。

以下是一個簡單的 Vue Router demo，它展示了如何使用 Vue Router 來實(shí)現(xiàn)基本的導(dǎo)航功能。

const Foo = { template: '<div><h1>This is Foo!</h1></div>' }
const Bar = { template: '<div><h1>This is Bar!</h1></div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')

在這個 demo 中，我們首先定義了兩個組件 Foo 和 Bar，它們都包含一個簡單的標(biāo)題。接下來，我們定義了兩個路由 "/foo" 和 "/bar"，并為每個路由指定了一個組件。

請注意，我們將 routes 數(shù)組作為參數(shù)傳遞給了 VueRouter 的構(gòu)造函數(shù)，以便生成路由器實(shí)例。

最后，我們創(chuàng)建了一個 Vue 實(shí)例，并將路由器實(shí)例作為其選項(xiàng)傳遞。然后，我們將該實(shí)例掛載到一個 HTML 元素上，并指定了一個 ID 為 "app"。這將使該實(shí)例的根元素成為該元素。

接下來，我們需要在 HTML 文件中添加我們的導(dǎo)航鏈接。通常情況下，您將會在頭部和頁腳中添加鏈接，以便供用戶瀏覽。

<div id="app">
<nav>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</nav>
<router-view></router-view>
</div>

如你所見，我們在這個 demo 中使用了 router-link 指令來創(chuàng)建我們的鏈接。這個指令可以接收一個 to 屬性，用于指定鏈接的目標(biāo)路由。

此外，我們還在 div 元素中添加了一個<router-view>元素，這是用于呈現(xiàn)與當(dāng)前路由對應(yīng)的組件的地方。這個元素的位置是可選的，它的存在使得 Vue Router 能夠在頁面上查找并插入對應(yīng)的組件。

最后，當(dāng)我們點(diǎn)擊鏈接時(shí)，Vue Router 將會自動切換到目標(biāo)路由，并呈現(xiàn)對應(yīng)的組件。這一切都是由 Vue Router 的底層邏輯所處理的，我們只需要配置好路由和鏈接就可以了。

需要注意的是，該 demo 只是一個最基本的 Vue Router 實(shí)現(xiàn)，您還需要參考官方文檔來深入了解這個庫的更多特性和用法。