将自定义数据传递给 vue-router 中的 `$router.push()`

Posted 2023-02-22

【中文标题】将自定义数据传递给 vue-router 中的 `$router.push()`

【英文标题】：Pass custom data to `$router.push()` in vue-router

【发布时间】：2019-03-09 11:36:42

【问题描述】：

有没有办法向$router.push() 传递未注册为参数或路由路径中的查询的附加数据。这将允许我在下一页上识别它已通过编程导航访问，因为无法通过 URL 传递它。比如：

this.$router.push(
   path: '/next-page', 
   params: ..., 
   query: ..., 
   moreData: foo: 1
)

然后在/next-page:

this.$route.moreData.foo // 1

目前我正在使用$store 处理moreData

【问题讨论】：

你能用meta代替moreData吗？

我试过.push(meta: foo: 1)，但转换后$route.meta是空对象（）

为什么不能通过查询来实现？

因为参数是私有的

【参考方案1】：

在我的例子中，我使用了名称重定向，但无法接收自定义参数，因为目标路由有一个路径重定向 - 在这种情况下，提供的参数丢失了。

因此需要从“路径重定向”更改为“命名重定向”，但由于“路径重定向”在路径中包含附加数据，我现在需要通过“名称重定向”传递该数据很好地使用参数。

所以我最终得到了一个帮助“redirectByName”函数，它在这种情况下保留了参数：

redirectByName.js

//redirects by preserving params
export default (name, params = ) => 
    return (route) => (
        ...route,
        name,
        params: 
            ...route.params,
            ...params
        
    )

这是一个如何使用它的示例：

myRoutes.js

    import redirectByName from "./redirectByName";
    ...
    export default return [
        
            path:'some/path',
            name: 'targetRouteName',
            redirect:redirectByName('redirectRouteName', tab: 'general'), //optional additional parameters for redirection
        , 
        
            path:'some/path/:tab', 
            name: 'redirectRouteName'
        ]

redirectByName 基本上采用目标route 对象来保存所有传递的数据，用提供的参数覆盖其name 参数并合并参数。然后它将最终的路由对象传回以完成重定向。

【参考方案2】：

我找到了解决方案。 Vue-router docs 中有一个注释，上面写着：

注意：如果提供了 path，params 将被忽略...相反，您需要提供 name

因此，如果我们使用路由的 name 导航，我们可以将自定义数据传递给 params，如下所示：

$router.push(name: 'next-page', params: foo: 1)

// in /next-page
$route.params.foo // 1

【讨论】：

@slim，这个路由名称的 url 是什么？数据是否通过 URL 传递？

@AkshayDeshmukh 不，它没有通过 url 传递，但可以通过 $route.params 访问。 url 是与具有该名称的路由相对应的那个。应该只有一个具有该名称的路由，因为它被视为唯一标识符。当然，如果我导航到具有path = '/users/:id' 的路线 name: 'users-id', params: id: 1，则该ID 也会出现在URL 中。

呸，params 只适用于命名路由，这是多么令人沮丧的错误，我花了很长时间才弄明白，谢谢！

@Kevin 这不是一个真正的错误。他们只是使用单一的事实来源。如果您通过path，他们必须从那里提取参数。否则，他们会寻找 params 对象 :) 不过，他们可能应该始终尝试将两者与 path 上的更高优先级合并，以防名称冲突。