关于VUE的嵌套路由访问路径

张一行
  • 16

clipboard.png
我这样配置的路由,但是访问http://localhost:5000/#/query 就可以访问到子路由/query ,
这个#号有什么用?为什么不用访问/index/query?

回复
阅读 5.8k
5 个回答
海洋饼干
  • 1.5k
✓ 已被采纳

1.为什么是#/query而不是/index/query,是因为你声明的路由是/query,是直接针对根路径的,如果访问时显示/index/query,需要将子路由改成上面那样,是需要手动声明的,不是说index的子路由就会自动带上index的路径前缀。

子路由的path参数如果可以写 :/父路由/子路由(即/index/query),也可以直接/子路由,不是必须带有父路由的前缀,带有父路由表示一定的从属关系,不是必须的。

2.#表示hash路由模式,hash模式会在URL后加#看上去不是那么好看,但是一般的功能上都没问题的。重要的是,另外#后面的部分服务端无法识别,即向服务器提交的只是#号前面的url地址。

history模式,另一种路由模式,如楼上那样可以转换成history模式,比hash跟美观,而且会提交完整的url,这个需要服务端来配置,不然服务器会返回404。

这个是hash模式 如果不想要#可以在 new router的时候加上

mode: 'history'

history

王林峰
  • 4
新手上路,请多包涵

/query前面的/去掉,就是相对于你的父级路由了,如果有/就是相对根路径。就这么简单。

用于处理路由的解析,以匹配执行到对应的VUE页面,默认是hash,以#标记来分割路由的地址,如果你不想显示#,可以用history模式,但两区有一定的区别。

因为默认的路由模式为hash模式,所以用#分割地址,因为#不会使浏览器跳转页面,就可以让router处理路由了。

宣传栏