美文网首页
记录一次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