在 Vue 路由器配置中结合来自 url 和 props 对象的优点

Question

这是我的路由器配置。

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

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

有任何想法吗 ？

Answer 1

如果我理解正确，您希望将道具设置sidebar为true（静态）并将道具id设置为:idURL 参数（动态）。

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

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

查看vue-router 文档中的功能模式以获取更多信息。

Answer 2

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

this.$route.path或者

this.$route.params.id

从你的函数、计算的 props 或你的模板中