1. 程式人生 > >Vue路由實現原理

Vue路由實現原理

前端路由是直接找到與地址匹配的一個元件或物件並將其渲染出來。

通過改變瀏覽器地址URL在不重新請求頁面的情況下,更新頁面檢視

有兩種方式:

1.一種是# hash   ,    在地址中加入#以欺騙瀏覽器,地址的改變是由於正在進行頁內導航  2.一種是h5的history  ,     使用URL的Hash來模擬一個完整的URL

當打包構建應用時,Javascript 包會變得非常大,影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼塊,然後當路由被訪問的時候才載入對應元件,這樣就更加高效了。

利用 Vue.js 提供的外掛機制 .use(plugin) 來安裝 VueRouter

vue-routerVue.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
    }
  ]
})