vue-cli3.0配置多页history路由模式

1、在对应的多页目录下的router.js配置history

const router =  new Router({
  base: '/mobile/share',
  mode: 'history',
  },

注:router里面的base属性是项目部署服务器的目录路径,例如你的项目访问路径是www.xxx.com/mobile/share
2、在vue.congig.js添加代码

    configureWebpack: {
        devServer: {
            historyApiFallback: {
                verbose: true,
                rewrites: [
                    { from: '/xx', to: '/yy.html'}
                ]
            }
        }
    },

注:from指你多页中进入其中一个页面index的路由路径,to表示重写到yy.html 至于多页配置自行搜索,注意的是修改vue.config.js需要重新启动才会生效。
3、重启输入localhost:8080/xx就可以访问到yy.html的代码
补充:如果部署到nginx服务器,发现报404,就需要nginx部署修改下代码

   location / {
            root   /software/vue/dist;
            index  index.html;
                try_files $uri $uri/ /index.html;
        }
        location /xx {
                root   /software/vue/dist;
                index  yy.html;
                try_files $uri $uri/ /yy.html;
        }

root:项目dist下面的文件部署的根目录

你可能感兴趣的:(vue.js,vue-router,history)