vue如何实现跳页

Vue实现跳页的方法

在Vue中实现页面跳转可以通过以下几种方式：

使用router-link组件

通过Vue Router提供的<router-link>组件实现页面跳转，适合在模板中使用：

<router-link to="/about">跳转到关于页面</router-link>

编程式导航

在JavaScript代码中使用this.$router.push方法实现跳转：

methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

带参数的跳转

传递参数到目标页面：

// 传递params
this.$router.push({ name: 'user', params: { userId: '123' } })

// 传递query
this.$router.push({ path: 'register', query: { plan: 'private' } })

替换当前路由

使用replace方法不会向history添加新记录：

this.$router.replace('/home')

命名路由跳转

通过路由名称进行跳转：

this.$router.push({ name: 'user', params: { userId: 123 } })

动态路径跳转

使用动态路径参数进行跳转：

this.$router.push(`/user/${userId}`)

前进后退导航

使用go方法在历史记录中前进或后退：

// 前进
this.$router.go(1)

// 后退
this.$router.go(-1)

确保项目中已正确配置Vue Router，并在main.js中引入和挂载router实例。路由配置示例：

const router = new VueRouter({
  routes: [
    { path: '/about', component: About },
    { path: '/user/:id', component: User }
  ]
})