在 Vue 中实现链接跳转可以使用 <router-link> 组件，传递参数时可以使用 query 或 params 对象，也可以通过命名路由实现更方便的跳转。此外，还可以使用 this.$router.push() 和 this.$router.replace() 方法进行跳转。
Vue 中实现链接跳转
在 Vue.js 中，可以使用 <router-link> 组件来实现页面之间的跳转。该组件提供了类似于 HTML 中 <a> 标签的功能，但可以在 Vue 中管理路由状态。
链接跳转的基本语法：
<code class="html"><router-link to="target-url">Link Text</router-link></code>
其中：
立即学习“前端免费学习笔记（深入）”；
-
to属性指定需要跳转到的目标 URL。 -
Link Text是显示在链接上的文本内容。
参数传递：
需要传递参数时，可以使用 query 或 params 对象：
- query 参数：用于在 URL 查询字符串中传递数据。语法：
<code><router-link :to="{ query: { param1: value1, param2: value2 } }">...</router-link></code>- params 参数：用于在路由路径中传递数据。语法：
<code><router-link :to="{ params: { param1: value1, param2: value2 } }">...</router-link></code>命名路由：
可以使用命名路由来实现更方便的跳转。在路由配置文件中定义命名路由：
<code class="javascript">// routes.js
export default [
{
path: '/about',
name: 'about',
component: About
}
];</code>然后在链接中使用 name 属性：
<code class="html"><router-link :to="{ name: 'about' }">About</router-link></code>其他方式：
除了 <router-link> 组件，还可以使用 this.$router.push() 和 this.$router.replace() 方法进行跳转：
-
this.$router.push(target-url)：将新路由添加到历史记录堆栈。 -
this.$router.replace(target-url)：替换当前路由，不会添加到历史记录堆栈。
