export default (imported as router) was not found_History API 與 vue-router路由中#的解析 - 一文g

URL(Universal Resource Locator)即統一資源定位符，又稱網頁位址，用于定位浏覽器中所需顯示的網頁資源。

在 H5 之前，即使采用的是腳本語言的方式，隻要浏覽器位址欄中的 URL 位址被切換，都會觸發一個頁面重新整理的過程，這個過程将耗費一些時間與資源。在很多時候，尤其是兩個大部分内容相同的頁面之間進行切換時，這個過程往往被視為一種浪費。

History API

H5 的 History API 允許在不重新整理頁面的前提下，通過腳本語言的方式來進行頁面上某塊局部内容的更新。

vue-router

 預設 hash 模式 —— 使用 URL 的 hash 來模拟一個完整的 URL，于是當 URL 改變時，頁面不會重新加載。

如果不想要很醜的 hash，我們可以用路由的 history 模式，這種模式充分利用   API 來完成 URL 跳轉而無須重新加載頁面。

/* jshint esversion: 6 */
import VueRouter from "vue-router";
import Vue from 'vue';
import Order from '@/components/Order';
import Home from '@/components/Home';
import My from '@/components/My';

(VueRouter);

const routes = [
    {
        path: '/',
        component:Home,
        name: 'home'
    },
    {
        path: '/order',
        component:Order,
        name: 'order'
    },
    {
        path: '/mine',
        component:My,
        name: 'mine'
    },
];

// 添加mode為history就不會有#
const router = new VueRouter({
    mode: 'history',
    routes
});

export default router;
           

當你使用 history 模式時，URL 就像正常的 url

不過這種模式要玩好，還需要背景配置支援。因為我們的應用是個單頁用戶端應用，如果背景沒有正确的配置，當使用者在浏覽器直接通路 

 就會傳回 404，這就不好看了。

是以呢，你要在服務端增加一個覆寫所有情況的候選資源：如果 URL 比對不到任何靜态資源，則應該傳回同一個 

 頁面，這個頁面就是你 app 依賴的頁面。