Vue Router 提供了强大的参数匹配能力。要匹配任何内容,可以使用自定义参数正则表达式,方法是在参数后面的圆括号中使用正则表达式。
举个例子,我们在components文件夹下新建两个文件,分别为用户中心何用户设置页面,在其中编写代码如下:
这两个页面所需参数不同。接着在main.js中定义路由:
Const routes = [
{path:’/user/:username’,component:User},
{path:’/user/:id,component:UserSetting}
]
可以发现,这两个路由除了参数名不同外,其余都相同,这种情况下,我们无法访问用户设置界面,所有符合UserSetting组件的路由规则同时也符合User组件。这时便可以通过正则表达式来实现不同类型参数匹配到不同组件。
在进行路由参数匹配时,Vue Router允许参数内部使用正则表达式来进行匹配,如下。
Const routes = [
{path:’/user/:username’,component:User},
{path:’/user/:id(\\d+),component:UserSetting}
]
这样,对于数字类型的参数便可匹配到UserSetting组件,其他类型参数则自动匹配到User组件下。
上一篇: APICloud 窗口篇
下一篇: 请求中如何以表单的形式提交参数