vue router怎么实现跳转

编程式导航

使用 this.$router.push 方法实现页面跳转，参数可以是路径字符串或路由配置对象。例如跳转到 /home 路径：this.$router.push('/home')。传递参数时可以使用对象形式：this.$router.push({ path: '/user', query: { id: 123 } })。

声明式导航

在模板中使用 <router-link> 组件，通过 to 属性指定目标路由。例如 <router-link to="/about">About</router-link>。需要传递参数时可以写成 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>。

路由替换

使用 this.$router.replace 方法替换当前路由，不会向历史记录添加新条目。例如 this.$router.replace('/login')。适用于不需要回退的场景，如登录后跳转主页。

路由重定向

在路由配置中使用 redirect 字段实现自动跳转。例如：

const routes = [
  { path: '/old-path', redirect: '/new-path' }
]

动态路由跳转

通过冒号 : 定义动态路径参数，例如路由配置 { path: '/user/:id', component: User }。跳转时传递参数：this.$router.push('/user/123')，在目标组件中通过 this.$route.params.id 获取参数值。

命名路由跳转

在路由配置中给路由设置 name 属性，例如 { path: '/user', name: 'user', component: User }。跳转时可以通过名称引用：this.$router.push({ name: 'user' })，这种方式不受路径修改的影响。