通过 this.$router.push 在 VueJS 中传递 props 来路由组件

Question

路由器配置：

const routes = [
    { path: '/' , redirect: '/login'},
    { path: '/chat', component: MyChat,props: true},
    { path: '/login', component: MyLogin},
  ]

带道具的聊天组件：

export default {
    name: "MyChat",
    props:{
      avatar_url : {
        type: String,
      }
    }

路由器推送传递道具：

 this.$router.push({path:'/chat',props: {avatar_url: 'rrrrrrr'}});

当我直接在路由数组中传递道具时，它确实有效：

const routes = [
    { path: '/' , redirect: '/login'},
    { path: '/chat', component: MyChat,props: {avatar_url: 'myurl'}},
    { path: '/login', component: MyLogin},
  ]

但是当我尝试在 this.$router.push 中传递道具时，如果有人对此有答案的话，它不会。

Answer 1

boolean 模式仅传递路由参数，因此avatar_url必须是 url 的一部分，例如：

{ path: '/chat/:avatar_url', component: MyChat, props: true},

在 Vue 2 中，我记得你仍然可以在function 模式下从路由中获取其他道具：

{
  path: '/chat',
  component: MyChat,
  props: route => ({ avatar_url: route.props.avatar_url })
},

但我不确定这在 Vue 3 中是否仍然有效。