vue.js - 带有子路径的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但是我如何访问参数/...？

score 1 · Accepted Answer

你可以像这样使用

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

使用 :(名称)，在组件中：

this.$route.params.id

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

VueRouter示例页面

score 1 · Accepted Answer

从docs中，按如下方式进行：

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

然后在匹配的组件中，就可以通过$route.params.id.

score 1 · Accepted Answer

将您的路由器设置为：

{
  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

3 回答 3