2017-06-12 51 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