Vue.js 是一個流行的前端開發框架，擁有許多優秀的插件和工具，其中之一就是 Vue Router。Vue Router 提供了路由系統，可以在應用程序中實現單頁面的跳轉和交互。Element UI 是另一個優秀的 Vue 插件，提供了一套美觀的 UI 組件，用于快速搭建美觀的用戶界面。本文將介紹如何結合 Vue Router 和 Element UI 實現單頁面應用的路由。

首先，在使用 Element UI 前，需要先安裝和導入 Element UI。

// 安裝 Element UI
npm install element-ui -S
// 在 main.js 中導入 Element UI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

接著，在 Vue Router 中配置路由。可以使用基于 History 模式的路由，也可以使用基于 Hash 模式的路由。

// 基于 History 模式的路由
const router = new VueRouter({
mode: 'history',
routes
})
// 基于 Hash 模式的路由
const router = new VueRouter({
mode: 'hash',
routes
})

然后，在組件中使用 Element UI 的路由鏈接組件，即 el-link。el-link 可以通過 to 屬性指定路由跳轉的目標位置。

About

最后，在 Vue 實例中注冊路由，并在 template 中使用 router-view 組件來展示路由對應的組件。

new Vue({
router,
render: h =>h(App)
}).$mount('#app')

綜上所述，Vue Router 和 Element UI 是非常實用的前端開發工具。通過結合使用，可以快速搭建出美觀且功能強大的單頁面應用程序。