问题出在静态路由下面有个通配符匹配到/404页面
 我们把静态路由下的
 
{ path: '*', redirect: '/404', hidden: true }
 
删除就可以了。
 在动态路由校验的代码中有处理跳转404的代码
 
 
【updated】
 做了动态路由的话把上面的代码放在动态路由结尾处是更好的选择。

vue开发页面，通过addRoutes实现动态路由的添加，但是在进入对应页面的时候刷新时跳转到404或空白，最后发现只需把空白页面跳转直接加载到动态路由后面即可解决，代码如下：
   1：静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }（如果有）
   2：在动态路由中push上面注释掉的路由，asyncRoutes.push({ path: '*', redirect: '/404', hidden: true });
   一天的郁闷最后时刻搞定，哈哈哈哈哈哈哈。。。。。。

例如我们在router.js中是这么写的
 
{
  path: '/detail/:id',
  component: Detail,
  name:'detail'
},
 
接下来进入详情页this.$router.push("/detail/111"),此时刷新页面就会发现/111神奇的消失了。一脸懵逼。。。。
 
查阅相关文档后，发现vue有两种传参方式：params和query，正确的传参姿势应该是这样：
 
params方式：
 
 query方式：
 
 通过上面对比可以发现，params是和name配合使用，而query是和path配合使用。
 
通过对比地址栏路由可以发现，params方式的路径和post方式传参类似，而query和get方式传参类似。

Vue history路由模式 刷新404
 
当我们使用Vue开发SPA（单页面应用）的时候，需要引入前端路由系统（vue-router）。vue-router是vue.js官方提供的路由插件，它和vue.js是深度集成的。前端路由的核心，就在于 ——** 改变视图的同时不会向后端发出请求。**
 在Vue单页面应用中页面切换其实就是组件的切换，vue-router的作用在于将路径和组件联系起来，使得通过不同的路径可以访问到不同的组件。在传统的页面中，我们切换页面是通过a标签来实现，每一次页面切换都需要向后台发送请求。
 
vue-router的两种路由模式hash模式和history模式
 
在使用Vue-router时候路由模式默认是hash;
 hash模式的url中永远带着#号，它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。说到这里就不得不说一下前端路由的原理：window是可以监听到哈希值的变化的（onhashchage事件），这就意味着：当url中的哈希值发生了变化，无需发起http请求，window也可以监听到这种变化，并按需加载前端的代码块。哈希模式也是当下单页面应用的标配,所谓前端路由的强大之处也就在这里：路由分发不需要服务器来做，前端自己就可以完成。
 
历史模式（history mode）
 history模式利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
 
hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。
 
hash模式的#可能会使人认为不太美观，于是选用了history,history相对于hash来说符合URL标准格式，但是history模式有一个很大的坑：刷新404
 
当页面刷新时：
 
1、hash 模式下刷新会请求后台，但是url中只包含#之前的部分，后台是存在对应了路由的，不会404，页面正常。
 
2、history 模式下刷新请求后台，此时的url是所有的url，包含get参数，如：http://www.baidu.com/detail/id，当后台中缺少对 /detail/id将返回 404 错误。history需要后台支持。
 
解决办法
 
1、apache服务器
 
1.apache开启rewrite模块
 **具体做法：**找到apache环境下的httpd.conf文件，搜索LoadModule rewrite_module modules/mod_rewrite.so（搜索不到可以是空格，搜索一部分只要能找到就行），去掉前面的“#”号。
 
注：LoadModule rewrite_module modules/mod_rewrite.so 如果找不到，请在httpd.conf添加
 
2.虚拟主机配置Allowoverride为all
 **具体做法：**最好把httpd.conf里面的所有AllowOverride none 修改为all
 
3、.htaccess
 
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  // 注意：这个目录是你设置存放vue上线文件的目录，如说我vue文件放在了根目录下的dist文件夹中，这样可写为/dist/index.html
  RewriteRule . /dist/index.html [L]
</IfModule>
 
在网站根目录添加.htaccess 文件，并把以上代码添加进去, 保存
 
4.重启Apache
 
2、nginx服务器
 
server{
	listen  80;
	server_name  域名;
	location / {
	    try_files $uri $uri/ @router; // 这里配置vue ’history‘ 路由子页面无法刷新
	 	root 前端页面路径;
         index index.html;
    }
       // 这里配置vue ’history‘ 路由子页面无法刷新
     location @router {
          rewrite ^.*$ /index.html last;
     }
}```