vue实现点击跳转路由

Vue 路由跳转实现方法

在 Vue 中实现点击跳转路由，可以通过以下方式完成：

使用 router-link 组件

<router-link to="/path">跳转到目标页</router-link>

router-link 是 Vue Router 提供的组件，会自动渲染为 <a> 标签。to 属性指定目标路由路径。

编程式导航

在方法中通过 this.$router.push 实现跳转：

methods: {
  navigateToPath() {
    this.$router.push('/path')
  }
}

也可以传递命名路由：

this.$router.push({ name: 'routeName' })

或带参数的路由：

this.$router.push({ path: '/user', query: { id: '123' } })

替换当前路由

使用 replace 方法不会留下历史记录：

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

路由传参

通过 params 传递参数：

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

接收参数：

this.$route.params.userId

导航守卫

可以在路由跳转前执行逻辑：

router.beforeEach((to, from, next) => {
  // 跳转前逻辑
  next()
})

确保在使用路由功能前，项目已正确安装和配置 Vue Router。