vue标签实现跳转

Vue 实现页面跳转的方法

在 Vue 中实现页面跳转可以通过多种方式，以下是常见的几种方法：

使用 router-link 组件

router-link 是 Vue Router 提供的组件，用于声明式导航：

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

可以添加动态路径参数：

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户页</router-link>

编程式导航

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

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

带参数跳转：

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

路由别名跳转

使用命名路由跳转：

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

替换当前路由

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

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

重定向

在路由配置中设置重定向：

{
  path: '/old-path',
  redirect: '/new-path'
}

在新窗口打开

添加 target="_blank" 属性：

<router-link to="/external" target="_blank">新窗口打开</router-link>

导航守卫

可以使用路由守卫控制跳转：

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

每种方法适用于不同场景，router-link 适合模板中的声明式导航，编程式导航适合在方法中控制跳转逻辑。根据项目需求选择最合适的实现方式。