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

Question

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

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

然后在/next-page:

this.$route.moreData.foo // 1

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

Answer 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 参数并合并参数。然后它将最终的路由对象传回以完成重定向。

Answer 2

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

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

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

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

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