RouterLink 在 Vue Js 中未正确显示

Question

我在 Vue Js 中使用 routerLink 时遇到问题。它只显示 localhost:8080/#/purchase-orders。它应该是 localhost:8080/#/purchase-orders/2 因为我添加了 params 属性。我该如何解决这个问题？

<el-table-column
                            fixed="right"
                            property="action"
                            label="Action"
                            width="120">
                            <template slot-scope="scope">
                                <router-link :to="{ path: '', params: { id: 2 }}">
                                    <el-button type="text" size="small">Detail</el-button>
                                </router-link>
                                <el-button type="text" size="small">Edit</el-button>
                            </template>
                        </el-table-column>

Answer 1

如果使用 path，则忽略

params。 您需要改用 name。

应该是这样的：（假设 orders 是路线的名称）

<router-link :to="{ name: 'orders', params: { id: 2 }}">

或者，如果您想使用路径，则必须提供完整路径。

https://router.vuejs.org/guide/essentials/navigation.html

注意：如果提供了路径，则参数将被忽略，而查询则不是这种情况，如上例所示。相反，您需要提供路线的名称或使用任何参数手动指定整个路径：