美文网首页
Vue-Router 高级路由匹配

Vue-Router 高级路由匹配

作者: 海贼王Lorrin | 来源:发表于2021-07-20 16:45 被阅读0次

{path:'/'}

1、基础常见的全路径匹配,必须是等于才匹配

{path:'/params/:foo/:bar'}

2、动态路径,"/params/foo/bar" 通过$route.params获取{{ foo: 'foo', bar: 'bar' }}

{path:'/optional-params/:foo?'}

3、最后一位路径可有可无,"/optional-params"、"/optional-params/foo",通过$route.params获取{{ foo: 'foo' }}

{path:'/params-with-regex/:id(\\d+)'},

4、一个参数后面可以跟一个括号中的正则表达式模式,限制该位置路劲的值类型,只有当 :id 全部为数字时,才会匹配此路由,“/params-with-regex/123",通过$route.params获取{{ id: '123' }}

{path:'/asterisk/*'},

5、星号可以匹配任何东西,"/asterisk/foo"、"/asterisk/abc"、"/asterisk/123"……

{path:'/optional-group/(foo/)?bar'}

6、通过用括号包裹并添加“?”来使路径的一部分成为可选的,"/optional-group/bar"、"/optional-group/foo/bar"

以上基本包含了各类情况,可根据具体业务需求混合穿插使用,如有遗漏,欢迎在评论区留言补充,谢谢

相关文章

网友评论

      本文标题:Vue-Router 高级路由匹配

      本文链接:https://www.haomeiwen.com/subject/nokrmltx.html