美文网首页
路由带:之动态路由匹配

路由带:之动态路由匹配

作者: fanfanda | 来源:发表于2019-07-11 14:09 被阅读0次

            我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:

    现在呢,像 /user/foo 和 /user/bar 都将映射到相同的路由。

    一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:

    路由中定义什么参数名,调用时就用什么参数

    这边定义了参数为username,在浏览器中输入user/evan   当调用this.$router.params.username时,this.$router.params.username即等于evan

    相关文章

      网友评论

          本文标题:路由带:之动态路由匹配

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