在Vue路由器配置中结合来自url和props对象的专业版

Question

这是我的路由器配置。

const router = new VueRouter({
  routes: [
   {
      path: '/user/:id',
      components: User,
      props: {
        sidebar: true 
      }
    }
  ]
})

我无法访问所有道具（例如sidebar和id），只能在此配置中使用sidebar。

有任何想法吗 ？

Answer 1

如果我理解正确，你想将prop sidebar设置为true（静态），将prop id设置为:id URL参数（动态）。

您将必须使用一个函数，该函数将路径作为参数并返回您要在组件上设置的prop值：

props: route => ({
  id: route.params.id,
  sidebar: true,
})

有关更多信息，请查看vue-router文档中的Function Mode。

Answer 2

您可以像这样访问路径路径和参数：

this.$route.path或

this.$route.params.id

从您的函数，计算道具或您的模板