怎么去掉使用vue-router后链接中的 “#！”

Question

vue-router文档中写了一个路由选项如下：

当创建路由器实例时，可以使用以下参数自定义路由器的行为。

hashbang
默认值： true
只在 hash 模式下可用
当 hashbang 值为 true 时，所有的路径都会被格式化为以 #! 开头。例如 router.go('/foo/bar') 会把浏览器的 URL 设为 example.com/#!/foo/bar 。

我在使用过这个参数设置为false后，链接中没有感叹号，依然还有#，如何去掉这个#号。这导致网页不能正常访问。

Answer 1

把vue-router 配置设置为 :

var router = new VueRouter({hashbang: false, history: true})

Answer 2

const router = new VueRouter({
mode: 'history'
})

Answer 3

这其实需要你理解什么是hashhistory和bowserhistory
带#的hash其实就是根据window.location.hash里的字符串来处理路由关系，页面刷新肯定是没问题的
但是不带#的bowserhistory只有斜杠/相当于访问目录，当前会话肯定没问题，但是刷新页面肯定会挂，放弃hash#的bowserhistory是需要服务端支持的，要做映射的。

还有就是#是不会导致页面访问错误的啊。。。hash是url标准里的一环。。

映射关系例如你访问http://abc/#a 这其实就是访问abc的首页下的a路由
如果你访问http://abc/a 如果没做服务器映射的话，相当于你要找根目录下的a文件，然而这个目录其实是前端定义的路由，服务器上是没有a这个文件的。这时候就需要服务端把abc/映射到abc/index.html 之后的就是查询的值

Answer 4

history: true 后，正常访问都进不了了~

Answer 5

新的“abstract”模式

如果你不需要回退这些的话（单页面的估计也没有必要），直接用新的“abstract”模式就好了。

const router = new VueRouter({
    mode: "abstract",
    routes: routes
})

浏览器顶部的地址栏纹丝不动，永远是index.html，比“history”好用。

Answer 6

设置mode: 'history'就可以了

Answer 7

new Router({
  mode: 'history'
})