vue实现跳转的方式
Vue 实现页面跳转的方式
使用 router-link 组件
router-link 是 Vue Router 提供的组件，用于声明式导航。通过 to 属性指定目标路由路径，支持动态绑定和命名路由。
<router-link to="/home">跳转到首页</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页面</router-link>编程式导航（this.$router.push）
通过调用 $router.push 方法实现动态跳转，适合在方法或事件中触发。参数可以是路径字符串或路由配置对象。
// 字符串路径
this.$router.push('/home')
// 带参数的对象
this.$router.push({ path: '/user', query: { id: 1 } })
// 命名路由
this.$router.push({ name: 'profile', params: { username: 'test' } })替换当前路由（this.$router.replace）
与 push 类似，但不会向历史记录添加新条目，直接替换当前路由。
this.$router.replace('/new-path')前进/后退（this.$router.go）
模拟浏览器历史记录的前进或后退操作，参数为步数。
this.$router.go(-1) // 后退一步
this.$router.go(1) // 前进一步路由重定向
在路由配置中使用 redirect 字段实现自动跳转，适用于路径匹配时直接转向其他路由。
const routes = [
{ path: '/old', redirect: '/new' },
{ path: '/new', component: NewPage }
]导航守卫控制跳转
通过全局或路由独享的守卫（如 beforeEach）拦截导航，实现权限控制或动态跳转逻辑。
router.beforeEach((to, from, next) => {
if (requiresAuth(to)) next('/login')
else next()
})动态路由跳转
通过 addRoutes 动态添加路由后跳转，适用于权限管理等场景。
const newRoute = { path: '/admin', component: Admin }
router.addRoutes([newRoute])
this.$router.push('/admin')注意事项
- 路径参数需与路由配置匹配，
params仅对命名路由有效。 query参数会显示在 URL 中，适合非敏感数据。- 编程式导航需确保
this指向 Vue 实例，或在组件外使用router实例。
