vue 实现点击跳转页面

大家好，欢迎来到IT知识分享网。

在Vue中实现点击跳转页面，通常有两种常见的方式：使用<router-link>组件和编程式导航。下面分别介绍这两种方法。

使用<router-link>组件

<router-link>是Vue Router提供的组件，用于创建链接，激活时可以自动添加CSS类，处理活性状态，并且支持 <a> 标签的全部特性。

示例代码：

<template> <div> <!-- 方式一：直接使用to属性指定路由路径 --> <router-link to="/targetPage">跳转到目标页面</router-link> <!-- 方式二：使用tag属性改变元素类型，例如使用button --> <router-link to="/targetPage" tag="button">点击跳转</router-link> </div> </template> 

编程式导航

如果你需要在某个事件（如按钮点击）中进行页面跳转，可以使用Vue Router的实例方法this.$router.push()或this.$router.replace()。

示例代码：

<template> <div> <button @click="navigateToTargetPage">点击跳转</button> </div> </template> <script> export default { 
      methods: { 
      navigateToTargetPage() { 
      // 使用push方法进行跳转，会在浏览历史中添加记录 this.$router.push('/targetPage'); // 或者使用replace方法，不会添加新的历史记录，替换当前的历史记录 // this.$router.replace('/targetPage'); } } } </script> 

确保在使用以上方法之前，你已经在Vue项目中安装并配置了Vue Router。如果还没有配置，需要按照Vue Router的官方文档指引进行设置。