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中有一个注释，内容为：

注意：如果提供了params，则会忽略path……相反，您需要提供name

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

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

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

Answer 2

在我的情况下，我使用的是重定向名，但由于目标路由具有按路径重定向的功能，因此无法接收自定义参数-在这种情况下，所提供的参数会丢失。

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

所以我最终得到了一个帮助程序“ 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（）

2 个答案: