具有子路径的Vue路由器

Question

我的网址包含以下内容：

  {
    path: '/resetpassword',
    name: 'view-resetpassword',
    component: ViewResetPassword,
  },

当我输入localhosst:8080/resetpassword

时它将打开

我的问题是如何访问以这种方式给出的参数：

localhost:8080/resetpassword/53c957fe-bbc2-4b32-8ebd-a84d79f7ffd2

我知道，我可以使用代码中的?key=value访问URL参数this.$route.query.key。但是如何访问参数/...？

Answer 1

您可以像这样使用

{ name: 'Projeto', path: '/projeto/:id', component: Projeto, meta: { public: true } }

，带有：（名称），在组件中：

this.$route.params.id

在我的示例中，id是ID，但是您可以输入其他名称

示例VueRouter

的页面

Answer 2

从docs进行，如下所示：

{
  path: '/resetpassword/:id',  // I changed here
  name: 'view-resetpassword',
  component: ViewResetPassword,
}

然后在匹配的组件中，您可以通过$route.params.id访问该参数。

Answer 3

将路由器设置为：

{
  path: '/resetpassword/:token?',
  name: 'view-resetpassword',
  component: ViewResetPassword,
},

该路线现在可以具有可选的token参数（?是可选参数）。 然后您可以在组件上访问它

this.$route.params.token

您也可以通过在路由器上添加props: true来代替它作为道具

{
  path: '/resetpassword/:token?',
  name: 'view-resetpassword',
  component: ViewResetPassword,
  props: true
},

以及您的组件

export default {
  ...
  props: ["token"];
  ...
}

然后您就可以访问道具

this.token