想要实现伪静态,路径后面加上 .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 配置为 ‘/’ 重启项目即可,打包上传时再修改为 ‘./’