咨询电话:
15628812133
02
2023/06

Vue路由匹配参数

发布时间:2023-06-02 18:39:55
发布者:MaiMai
浏览量:
0

Vue Router 提供了强大的参数匹配能力。要匹配任何内容,可以使用自定义参数正则表达式,方法是在参数后面的圆括号中使用正则表达式。

举个例子,我们在components文件夹下新建两个文件,分别为用户中心何用户设置页面,在其中编写代码如下:

image.png

image.png

这两个页面所需参数不同。接着在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组件下。

关键词:
返回列表