Vue Cli 3 动态路由实现伪静态

想要实现伪静态，路径后面加上 .html 后缀，可以通过动态路由来实现。
首先在你想要实现伪静态的页面的路由规则中配置，如：

{
	path: "/Detail/:id",
	name: "Detail",
	compontent: ......
}

这里是给 Detail 这个页面的路由中配置一个参数 id，这个参数是 parmas 参数，传递的方式有两种

this.$router.push({name: "Detail",params: {id: 9}})	//注意参数名得和路由规则中配置得一致，否则不会显示在路径里
this.$route.push("/Detail/9")

在 Detail 页面的 $route.params 里获取到传递过来的参数，这种 params 参数即使页面刷新或者前进后退都不会丢失。
要实现伪静态则是，将我们要传递的参数后面加上 “.html”，即

this.$router.push({name: "Detail",params: {id: '9.html'}})

这样路径就是 …/Detail/9.html ，我们拿到的参数就是 9.html ，我们再去掉后面的 .html 就得到了参数 id 了

注意这里有个坑，如果你的项目是部署在子路径下，也就是 vue.config.js 中配置了 publicPath:’./’ ，而且你的路由模式又是 history 模式，那么使用动态路由的页面，刷新就会报错

Uncaught SyntaxError: Unexpected token <

这是因为vue-cli 的publicPath默认是/，它会假设应用被部署到一个域名的根目录上，当被部署到一个子路径时，需要修改为:/子路径/
解决方法：将 publicPath 配置为 ‘/’ 重启项目即可，打包上传时再修改为 ‘./’