vue router 实现href

在 Vue Router 中实现类似 href 的功能

Vue Router 提供了多种方式实现页面跳转，以下是常见方法：

使用 <router-link> 组件

<router-link to="/path">跳转链接</router-link>

可以添加 tag 属性指定渲染为特定 HTML 元素：

<router-link to="/path" tag="a">跳转链接</router-link>

编程式导航

在组件方法中使用 $router 对象：

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

原生 href 方式

如果需要完全使用原生 href 方式跳转（会触发页面刷新）：

<a href="/path">普通链接</a>

动态路径

使用动态路径参数：

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

命名路由

通过路由名称跳转：

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

带查询参数

添加查询参数：

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

在新标签页打开

使用 <router-link> 的 target="_blank" 属性：

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

或者使用原生 a 标签：

<a :href="$router.resolve({name: 'routeName'}).href" target="_blank">新窗口打开</a>

获取当前路由信息

访问当前路由信息：

this.$route.path  // 当前路径
this.$route.params  // 动态路径参数
this.$route.query  // 查询参数

这些方法提供了在 Vue 应用中实现路由跳转的灵活选择，可以根据具体需求选用最合适的方式。