在 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 进行导航的推荐方式。