您的位置:首页 > Web前端 > Vue.js

Vue-router学习笔记——遇到的坑(一)history模式刷新/设置嵌套路由显示404/cannot find(webpack配置)

2018-12-06 10:10 791 查看

前端路由有两种,一种是hash模式,一种是history模式。

这两种模式的url路径都不需要真实存在,只需要为前端跳转做一个显示。
hash模式的url路径会带有

#
,看起来不太舒服且不好做SEO,但是因为浏览器向服务器请求时会自动忽略#后面的值,所以在浏览器中刷新还是很正常的。
history模式的url路径就像我们平常看到的那样,就是因为看起来很像真的,所以浏览器向服务器请求(也就是刷新)的时候会发现服务器根本没有这个路径资源,所以返回404。

需要在webpack配置项中的devServer加上

// history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回404,所以需要配置这一项
historyApiFallback: {
index: '/index.html' //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
},

在router配置中设置

children
也会出现404的情况,原因就是设置为history模式后,原本的静态资源获取不到了

// 原先hash模式下打包后的路径引入
<script type="text/javascript" src="bundle.feed9913.js"></script></body>

可以看到是直接引入的

bundle.js
,所以如果有children,那整个地址就会变成
http://localhost:8080/chidren/bundle.js
,
但是其实我们需要引入的是
http://localhost:8080/bundle.js
,所以需要设置在
bundle.js
加一个
/
代表从根路径引入。

需要在webpack配置项中加上

output: {
// 表示在引入静态资源时,从根路径开始引入
publicPath: '/'
},
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: