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

GitHub 加速计划 / vu / vue
108
18
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐