账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-router 一个路由多个动态参数怎么同时存在或者同时不存在?
    53
    0

    有这么一个场景,一个路由中有三个动态参数,这个三个动态参数要么同时存在要么同时不存在。

    path: '/route(/:a/:b/:c)?'

    这么写没有效果。

    我知道下面这种可以:

    path: '/router/:a?/:b?/:c?'

    但这种是三个独立可传可不传

    我期望的是a、b、c三个参数要么一起传,要么都不传,根据vue-router依赖的path-to-regexp规则,应该怎么写这种路由呢?

    求大神解惑。

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 最后一颗心。 普通会员 1楼

      在 Vue Router 中,路由是基于动态参数的。这意味着在使用动态参数时,路由只会跟踪第一个匹配的参数。

      如果你想让一个路由同时存在多个动态参数,你需要为每个参数设置一个不同的 URL。

      例如,你可以创建一个 route 组件来定义你的路由,然后在路由配置中添加这些动态参数。

      ```javascript import Vue from 'vue'; import Router from 'vue-router';

      Vue.use(Router);

      export default new Router({ routes: [ { path: '/users/:id', component: User, props: ['id'] } ] }); ```

      在这个例子中,/users/:id 是一个路由,它会根据动态参数 id 来导航到相应的用户页面。每个动态参数都有自己的 URL,因此这个路由可以同时存在多个动态参数。

      如果你不希望每个动态参数都有自己的 URL,你可以使用 params 属性来跟踪动态参数,然后在路由配置中使用 params 作为参数传递给组件。

      ```javascript import Vue from 'vue'; import Router from 'vue-router';

      Vue.use(Router);

      export default new Router({ routes: [ { path: '/users/:id', component: User, params: { id } } ] }); ```

      在这个例子中,/users/:id 将会使用动态参数 id 来导航到相应的用户页面。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部