2017-06-12 54 views
1

我試圖用歷史模式如下設置SPA路線渲染視圖:VueJs 2:無法用歷史模式和路由時PARAMS

{ 
    mode: 'history', 
    routes: [ 
    { 
     path: '/', 
     component: Home 
    }, 
    { 
     path: '/articles', 
     component: ArticleList, 
     children: [ 
     { 
      path: ':title', 
      component: ArticleView 
     } 
     ] 
    } 
    ] 
} 

由於我使用VUE和歷史模式路由Express應用程序我已經設置了「表達歷史-API的回退」作爲管道的最後一箇中間件:

const app = express(); 
const root = path.join(__dirname, '../client/dist'); 
app.use(express.static(root)); 
/* other middlewares */ 
app.use(fallback('index.html', {root: root})); 

在頁面重載的那一刻,一切工作正常。即加載一個url http://application/articles,正確打開視圖,但是當我嘗試訪問接受參數的視圖時,無論如何,視圖不會被加載,並且兩個請求都被髮送到express。

I.E.對http://application/articles/test的請求將解析爲兩個請求。一到http://application/articles/test和另一個到http://application/articles/app.[calculated-hash].js 據我所知,第一個請求獲取index.html另一個請求獲取綁定的js腳本。

另外,在express app上,所有到api的路由都以'api'作爲前綴。

問題: 什麼是錯的使用歷史的方式和途徑PARAMS因爲參數沒有途徑試圖手動輸入網址或打刷新時訪問他們的時候加載我的設置/代碼?

更新: 使用連接歷史-API的後備產生相同的結果

回答

1

的問題是與腳本標籤的WebPack注入到index.html的

<script type="text/javascript" src="app.06503cbc260646a996d9.js"></script> 

src屬性值缺少'/'前綴,因此文件的解析失敗。

因此使其工作,我已經掛在src文件是這樣的:

<script type="text/javascript" src="/app.06503cbc260646a996d9.js"></script> 

由於我使用的WebPack捆綁JS文件,對配置的WebPack我添加output.publicPath '/'

更多信息:connect-history-api-fallback bugtracker

+0

你能指定如何添加output.publicPath,什麼文件? – rai