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: '/' },
相关文章推荐
- vue——46-webpack打包vue-路由、嵌套路由、样式设置、独立路由 router.js
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- 解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- Vue路由history模式踩坑记录:nginx配置解决404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue-router使用 history 模式刷新后404问题
- vue-route+webpack部署单页路由项目,访问刷新出现404问题
- vue设置webpack文件别名+配置路由的默认class
- vue路由history模式刷新页面出现404问题
- 基于 Webpack 2 的 React Router 懒加载路由配置
- Vue 之 vue-router 路由嵌套不显示问题
- Vue.js学习之vue-router vuex axios webpack
- webpack+vue+vue-router创建项目具体(备注:供自己学习时以备随时可以查看用而整理,首发地址:http://blog.csdn.net/fungleo/article/detail)
- vue2.0子路由配置和跳转 vue-router: 嵌套路由
- Vue+Router+Webpack+Axios 构建项目实战(三)调整 App.vue 和 router 路由
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- webpack 配置学习笔记