美文网首页
记录一次vue-router配置history模式的经历

记录一次vue-router配置history模式的经历

作者: 为了鱼丸 | 来源:发表于2019-06-13 13:29 被阅读0次

之前两周用vue全家桶写了公司的官网,由于不想公司官网有难看的#符号,所以路由采用了history模式,由于history模式就是真是的请求服务器资源,但是前端路由的路径在服务器端是不存在的,所以需要将所有不存在的路由请求重写,转发到index.html来处理

前端路由配置

const base = routes.reduce((pre, {name}) => {
  const reg = RegExp(`/${name}.*`)
  return pre.replace(reg, '')
}, location.pathname)
export default new Router({
  mode:'history',
  base:base,
  routes: routes,
  scrollBehavior(to,from,savedPosition){
    if(savedPosition){
      return savedPosition
    }else{
      return {x:0,y:0}
    }
  }
})

后端apache配置

由于我们需要对url进行重写,所以需要开启appache的rewrite模块

  1. 查找“#LoadModule rewrite_module modules/mod_rewrite.so” 去掉前面的#号
  2. 把AllowOverride None 改为 AllowOverride All
  3. 在你要部署的前端文件目录之下新建一个.htaccess文件 文件目录

    在文件内写入以下代码

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ /index.html [L] #注意这里的路径,如果是在根路径直接写/index.html,如果不是根路径还需要加上路径名称

这样就大功告成了

相关文章

网友评论

      本文标题:记录一次vue-router配置history模式的经历

      本文链接:https://www.haomeiwen.com/subject/qzojfctx.html