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' }),这种方式不受路径修改的影响。






