将URL中的参数与VUE路由器配置中的PROPS对象相结合

Combine parameters from URL with props object in Vue router config(将URL中的参数与VUE路由器配置中的PROPS对象相结合)

本文介绍了将URL中的参数与VUE路由器配置中的PROPS对象相结合的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我的路由器配置。

const router = new VueRouter({
  routes: [
   {
      path: '/user/:id',
      components: User,
      props: {
        sidebar: true 
      }
    }
  ]
})
我无法访问所有道具(例如sidebarid),只能访问此配置中的sidebar

有什么想法吗?

URL

如果我理解正确的话,您希望将属性sidebar设置为true(静态),将属性id设置为:id推荐答案参数(动态)。

您必须使用一个函数,该函数将路线作为参数,并返回要在组件上设置的属性值:

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

有关详细信息,请查看VUE路由器文档中的Function Mode。

这篇关于将URL中的参数与VUE路由器配置中的PROPS对象相结合的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:将URL中的参数与VUE路由器配置中的PROPS对象相结合

基础教程推荐