将自定义数据传递给 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

我找到了解决方案。在 Vue-router docs 中有一个 Note 说：

Note: params are ignored if a path is provided ... Instead, you need to provide the name

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

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

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

Answer 2

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

所以需要从 'path redirect' 更改为 'named redirect'，但是由于 'path redirect' 在路径中包含额外的数据，我现在需要通过'name redirect' 以及使用参数。

所以我最终得到了一个帮助程序“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 参数并合并参数。然后它将最终的路由对象传回以完成重定向。

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

Pass custom data to `$router.push()` in vue-router

javascript

vue-router

vuejs2

nuxt.js