vue 路由history模式

2018-07-25 14:47:00 weixin_34409822 阅读数 16

vue路由的模式默认是hash的，url上会带有#号，路由在#号后面 如：http://api.51app.cn/gamepage/index.html#/index
在百度统计的时候把#后面的去掉了，就没有统计到具体的页面，并且这样很不美观，希望改成这样http://api.51app.cn/gamepage/v1/index

需要改的地方

1. router/index.js;与routes同一级添加两个属性mode：'history',base:'/gamepage/v1'
   非根目录的项目需要加上base 的路径
   我的理解是base是指定url上哪一段是目录，之后的就是路由了

2. 后台nginx配置 未找到该路径文件的时候重定向到/gamepage/index.html

if (!-e $request_filename) {
        rewrite ^/(.*) /gamepage/v1/index.html last;
        break;
    } 

刷新的时候404 也就是因为url上目录和路由是连在一起的，后台默认是全部当目录去找，后面的路由当然是没有这个目录的，故这个时候直接重定向到项目index.html所在的目录，再通过vue的base字段划分出路由部分即可

3.但后来发现开发的时候，本机的服务器也会刷新404，故开发时用hash模式，build时用history

const IS_DEV = process.env.NODE_ENV === 'development';
export default new Router({
     //mode、base还要区分开发与生产 开发url是在根目录,开发时history模式刷新会error，应该是本机的服务器未配置
     //当mode为hash时候发现base未产生左右，故开发用hash模式，生产用history模式 防止url上带#，百度统计等拿不到#后面的参数，也是美化url
     mode: IS_DEV?'hash':'history',//history模式没有井号，默认为hash，有井号
    
     base: '/'+location.pathname.split('/')[1]+'/'+location.pathname.split('/')[2],//取到两级的目录 后面都是路由
    routes:[...]