Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成,使得構(gòu)建單頁應(yīng)用變得易如反掌。Vue Router 是基于 Vue.js 的一個(gè)官方插件,它對 Vue.js 的路由管理沒有強(qiáng)制依賴,也就是說,你可以在任何地方使用 Vue.js,或者不使用 Vue.js 來開發(fā)應(yīng)用,而 Vue Router 都能完美地解決路由控制。
使用 Vue Router,我們可以輕松地實(shí)現(xiàn) SPA 應(yīng)用程序,它可以幫助我們通過一些配置來管理應(yīng)用的路由,并在需要時(shí)動(dòng)態(tài)加載組件。以下是 Vue-router 中的基本路由配置示例:
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
import About from '@/components/About';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/about',
name: 'About',
component: About
}
]
})
以上代碼通過 Vue.use() 的方法啟用插件(注:該句代碼在入口 main.js 中啟用插件),然后創(chuàng)建了一個(gè) new Router() 路由實(shí)例,其中包含了 path、name 和 component 屬性,用于配置路由信息。
在 Vue Router 中我們可以定義多個(gè)路由,并通過配置實(shí)現(xiàn)路由的跳轉(zhuǎn),比如通過$router.go(-1)
可以回到前一個(gè)歷史記錄,在路由配置對象中也可以自定義一些方法,來實(shí)現(xiàn)路由的跳轉(zhuǎn)、攔截和驗(yàn)證等各種功能。
總之,Vue Router 實(shí)現(xiàn)的都是通過 URL 改變視圖的效果,是實(shí)現(xiàn) Vue 單頁應(yīng)用的重要基石之一,如果你是一個(gè) Vue 開發(fā)者,那么 Vue Router 應(yīng)該是必不可少的一件工具。