vue router 点击跳转

在 Vue Router 中，我们可以使用 `<router-link>` 组件来创建一个链接，它会自动渲染成一个 `<a>` 标签，点击这个链接时就会触发路由切换。以下是一个示例：

<!-- 在模板中使用 router-link 组件 -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>

在这个示例中，我们使用 `<router-link>` 组件创建了三个链接，分别对应着三个路由。当用户点击这些链接时，会触发路由切换，显示对应的组件。

当然，我们也可以在 JavaScript 代码中使用编程式导航来实现路由切换。以下是一个示例：

// 在 JavaScript 代码中使用编程式导航
// 切换到 /home 路由
this.$router.push('/home')

// 切换到 /about 路由，并传递参数
this.$router.push({ path: '/about', query: { id: 123 } })

在这个示例中，我们使用 `this.$router.push()` 方法来实现路由切换。它接受一个路由对象或路由地址作为参数，用来指定要切换到的路由。可以根据需要传递参数，比如在第二个例子中，我们通过 `query` 属性传递了一个 id 参数。