Vue3.0 页面路由跳转的方式

在 Vue3.0 中，可以使用以下五种方式进行页面跳转：

引入路由并定义使用

import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();

一、使用 router.push() 方法进行编程式导航：

• 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

router.push('/path')

// 传递参数的方式
router.push({
   path: "/newTask",
   query: {
      uuid: item.uuid,
      projectName: item.projectName
   }
 })

二、使用 router.replace() 方法进行替换导航：

• 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.replace('/path')

三、router.go ：

• 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步。参数为 0 时会重新加载页面，但会有短暂白屏。

// 回退两个页面
router.go(-2);

四、router.back：

• 在 history 记录中，返回上一页。

router.back()

五、router.forward

• 在 history 记录中，前往下一页。

 使用 <router-link> 组件进行跳转：

<router-link to="/path">Go to Path</router-link>

其他跳转路由的方式

六、使用 <a> 标签进行跳转：

<a href="/path">Go to Path</a>

七、使用 window.location 进行原生页面跳转：

window.location.href = '/path'

这些方式可以根据需要进行选择， <router-link> 组件和 $router.push() 方法是使用 Vue Router 进行导航的推荐方式。