Vue3.0 页面路由跳转的方式
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
在 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 进行导航的推荐方式。
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)