在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

- Slim

---

你能否尝试使用 meta 而不是 moreData？ - Ayush Gupta

我尝试使用.push({meta: {foo: 1}})，但在转换后$route.meta为空对象（{}）。 - Slim

为什么你不能通过查询来实现它呢？ - niclas_4

因为参数是私有的。 - Slim

Answer 1

我找到了解决方案。在Vue-router文档中有一个注意事项，它说：

注意：path存在时忽略params... 相反，您需要提供name

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

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

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

- Slim

---

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

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

哎呀，他们的一个令人沮丧的 bug 是只有命名路由才能使用 params，这让我花了很长时间才弄清楚，谢谢！ - Kevin

@Kevin 这并不是一个真正的 bug。他们只是使用单一的真相来源。如果你传递了 path，他们必须从中提取参数。否则，他们会寻找一个 params 对象 :) 不过，他们应该总是尝试合并两者，并优先考虑 path 在名称冲突的情况下。 - Slim

иҜ·жіЁж„ҸпјҢеҰӮжһңжӮЁйңҖиҰҒдҪҝз”ЁеӨҡз§ҚиҜӯиЁҖпјҢиҜ·дҪҝз”ЁlocalePathеҮҪж•°жҲ–д»»дҪ•е…·жңүиҜӯиЁҖж„ҹзҹҘеҠҹиғҪзҡ„еҮҪж•°пјҢеӣ дёәи·Ҝз”ұеҗҚз§°жҳҜеёҰжңүеҗҺзјҖзҡ„з”ҹжҲҗзҡ„гҖӮ - Iulian Cravet

Answer 2

在我的情况下，我使用了重定向名称，但不能接收自定义参数，因为目标路由有一个按路径重定向，在这种情况下提供的参数被丢失。

因此，需要从“路径重定向”更改为“命名重定向”，但由于“路径重定向”在路径中包含其他数据，现在也需要使用params通过“命名重定向”传递这些数据。

所以，最终我有了一个助手函数“redirectByName”，在这种情况下保留了params。

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参数覆盖为提供的名称并合并参数。然后它会将最终路由对象传回以完成重定向。

- vir us