TS 上 vue 中 props 不传递给 route.push

Posted 2023-02-23

【中文标题】TS 上 vue 中 props 不传递给 route.push

【英文标题】：Props are not passed to route.push in vue on TS

【发布时间】：2021-10-21 04:59:35

【问题描述】：

我有一个简单的应用程序结构、表格和页面来创建一个新项目，要创建一个新项目我使用主页上的按钮转到项目创建页面

initNewRow(): void 
    let someData: string = 'someText';
    this.$router.push(
        name: 'catalog-create___en',
        params:  someData: someData 
    );

我想在导航中传递一些参数，路由中没有给定页面，因为我不需要在菜单中显示

只有一个带有表格的页面（没有用于创建元素的页面）

    id: 8,
    label: 'menuitems.Catalog.text',
    link: '/catalog/main',
    icon: 'ri-eye-line',      
    meta: 
        middleware: ['router-auth']
    
,

props中创建物品的页面打开时没有，为什么看不懂

@Component(
    name: 'Create',
    props: ['someData']
)
export default class Catalog extends Vue 
    @Prop( required: true )
    someData!: any;

    constructor() 
         super();
         this.someData = this.$route.params.someData;
         console.log(this.someData);
    

如何正确初始化一个属性？它现在在控制台日志中给了我一个错误：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "someData"

【参考方案1】：

如official documentation中所写

这些都是可以用的，你用的不行

const userId = '123'
router.push( name: 'user', params:  userId  ) // -> /user/123
router.push( path: `/user/$userId` ) // -> /user/123
// This will NOT work
router.push( path: '/user', params:  userId  ) // -> /user

将其更新为类似

this.$router.push( name: 'create', params:  someData  );

借助 Vue 开发工具，在这里可以找到您在项目中拥有的路线

【讨论】：

我明白了，但是如果我在路由中没有创建名称怎么办？而事实上，我传输的数据不属于url，我需要它在表单中工作

您确实为您生成了一个开箱即用的名称。你可以在 Vue devtools，Routing > Routes 部分找到它。否则，正如我所说：按照我的第一个 sn-p 代码的第 3 行所写的那样进行插值。

and in fact, I transfer data that does not belong to the url, I need it to work in the form 我不明白你的意思。请提供更多详细信息。

我的页面“创建”的路径中不需要这些参数

@ЯрославПрохоров 我在这里回答你的问题。您是否打算将POST 发送到后端？目前还不清楚您要在这里实现什么。