vue使用history模式及相关问题处路由

路由使用history模式

vue 默认使用的是hash模式，在这种模式下，所有的路由地址都会在端口号后加入一个#号。
使用这种模式：
一是url中带有#不是很美观
二是在某些特殊场景下无法达到需求
这时可以开启vue的history模式，可以消除这个#号

根据官方文档，秩序要在新建router时如下配置即可开启history模式

const router = new Router({mode: 'history', routes: routes});

在本地开发时，没有什么影响，但部署服务时，需要修改服务器配置。不然就会出404或者静态资源加载不出来的问题。我使用的是nginx代理，官方提供了以下的配置方案
在nginx.config中添加以下代码：

location / { try_files $uri $uri/ /index.html; }

修改之后，就不会出现404问题，但如果使用了二级路由，访问路由和嵌套路由页面，显示正常，但是刷新页面的时候，嵌套路由页面就出异常了

Uncaught SyntaxError: Unexpected token '<'

看下我们引入这些异常文件，是在index.html文件中直接引用的，也就是在根路径下引入的。之前的hash模式下,根路径是不会变的，所以我们在index.html文件中直接引入这些静态文件，是可行的，但是使用history模式后，根路径就不固定了。那么这种引入方式就不可行了，所以才造成了上边出现的页面无法渲染的问题：

这里我们将打包的配置由相对路径改为绝对路径，修改config下的index.js

将assetsPublicPath: './'修改为assetsPublicPath: '/'

build: {  
// Template for index.html  index: path.resolve(__dirname, '../dist/index.html'),  
// Paths  
assetsRoot: path.resolve(__dirname, '../dist'), 
assetsSubDirectory: 'static',  
assetsPublicPath: '/',

路由能够正常跳转，并且刷新也不再报错
参考连接：
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法