vue router跳外链如何在路由上动态拼接值

在Vue Router中，可以使用动态路由参数来动态拼接值。例如，如果你想要跳转到一个外链，并且需要将一些参数动态传递给该链接，可以在路由配置中定义一个动态路由参数，然后在跳转时将参数传递给该路由。 以下是一个示例： ```javascript // 定义动态路由参数 { path: '/external-link/:id', name: 'ExternalLink', component: ExternalLink } // 在组件中获取动态路由参数并拼接链接 export default { name: 'ExternalLink', mounted() { const id = this.$route.params.id; const externalLink = `https://example.com/${id}`; window.location.href = externalLink; } } ``` 在上面的示例中，我们定义了一个名为`ExternalLink`的路由，并使用动态路由参数`:id`来动态拼接外链。在组件中，我们使用`this.$route.params.id`来获取动态路由参数，并将其与外链的基本URL拼接起来。最后，我们使用`window.location.href`将浏览器重定向到该外链。 当我们需要跳转到该外链时，只需使用`router.push()`方法并传递动态路由参数即可： ```javascript this.$router.push({ name: 'ExternalLink', params: { id: '123' } }); ``` 在上面的示例中，我们将`id`参数设置为`123`，然后使用`router.push()`方法将用户重定向到外链`https://example.com/123`。