Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 -?Vue-route?History模式和路由懶加載

目錄

History模式

設置history模式

后端配置

Apache

路由懶加載

配置

總結

---

History模式

設置history模式

Vue-route默認hash模式——使用URL的hash來模擬一個完整的URL，

于是當URL改變時，頁面不會重新加載。

如果不想要很丑的hash，如下：

可以用路由的history模式，設置index.js中的mode。

這種模式充分利用history.pushStateAPI來完成URL跳轉而無需重新加載頁面。

示例如下：

當使用history模式時，URL就像正常的URL，例如http://www.xxx.com/user/id，相比原來要好看一些。

不過這種模式，需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問http://www.xxx.com/user/id 就會返回404。

效果：

?

后端配置

后端服務器配置示例。

Apache

Nginx

?

?

路由懶加載

首屏加載過慢，單頁面應用中。所有的js合并為一個大文件js時應用。

如果這是看首頁，也需要等待全部js下載下來體感是很不好的。

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

結合Vue的異步組件和webpack的代碼分割功能，輕松實現路由組件的懶加載。

配置

首先，將異步組件定義為返回一個promise的工廠函數

（該函數返回的promise應該resolve組件本身）：

第二，在webpack2中，我們可以使用動態import語法來定義代碼分塊點

?結合這兩者，這就是如何定義一個能夠被webpack自動代碼分割的異步組件。

路由配置中不需要改變，只需要像往常一個使用。

router/index.js中 路由配置修改

{path: '/center',name: 'center',component: () => import('@/views/centerView'),meta: {isLoginRequired: true}},

總結

Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 -?Vue-route?History模式和路由懶加載