Vue-router 是 Vue.js 官方的路由管理插件,可以方便的實現 Vue.js 單頁應用中的路由分發及頁面跳轉。它深度集成在 Vue.js 核心中,是 Vue.js 生態系統中一個很重要的組件。
Vue-router 使用了和 Vue.js 非常相似的 API,使用它可以很方便地進行路由定義,以及在頁面中使用路由功能。
Vue-router 的核心思想是將整個應用劃分為一些頁面,每個頁面對應一個路由,實際上就是確定了組件的渲染。Vue-router 的組件就扮演著路由與組件之間的橋梁的角色,當路由激活時,組件就會被渲染到對應的路由出口中。
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
},
{
path: '*',
component: NotFound
}
]
const router = new VueRouter({
routes
})
new Vue({
router,
el: '#app'
})
路由配置文件中,我們需要導入 VueRouter,使用 Vue 的 use 方法把它安裝到 Vue 上,創建路由配置,最后創建路由實例。
在 main.js 中,我們實例化了一個 VueRouter 對象,并把路由配置傳入。在 Vue 對象的掛載選項 el 中,指定了整個應用的掛載點。最終、啟動 Vue 路由。
除了這基本的配置,Vue-router 還提供了豐富的功能,例如:路由嵌套、路由命名、路由重定向、路由懶加載等。
在 Vue-router 里,我們可以使用 $router 對象獲取路由實例,使用 $route 對象獲取當前路由狀態。在路由變化時,Vue-router 會自動更新視圖,大大減輕我們的工作負擔。
通過使用 Vue-router,我們不僅可以優雅地管理單頁應用的路由,還可以大幅減少我們操作 DOM 元素的代碼量。
總之,Vue-router 是一個非常強大、易用、靈活的路由插件,它幫助我們輕松地構建和維護 Vue 單頁應用,是 Vue.js 開發的必備插件之一。