Vue路由實現原理
阿新 • • 發佈:2018-12-10
前端路由是直接找到與地址匹配的一個元件或物件並將其渲染出來。
通過改變瀏覽器地址URL
,在不重新請求頁面的情況下,更新頁面檢視
有兩種方式:
1.一種是# hash , 在地址中加入#以欺騙瀏覽器,地址的改變是由於正在進行頁內導航 2.一種是h5的history , 使用URL的Hash來模擬一個完整的URL
當打包構建應用時,Javascript 包會變得非常大,影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。
利用 Vue.js 提供的外掛機制 .use(plugin) 來安裝 VueRouter
vue-router
是Vue.js
框架的路由外掛,它是通過mode
這一引數控制路由的實現模式的:
const router=new VueRouter({
mode:'history',
routes:[...]
})
import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City from '@/pages/city/City' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/city', name: 'City', component: City } ] })