经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3页面跳转的两种方式
来源:jb51  时间:2023/5/15 9:00:24  对本文有异议

vue3的页面跳转有两种方式,第一种是标签内跳转,第二种是编程式路由导航

  1. 1
  2. <router-link to='/testDemo'>
  3. <button>点击跳转1</button>
  4. </router-link>
  5. 2router.push("/testDemo");

1、标签内 router-link跳转

通常用于点击 查看 按钮,跳转到其他页面

  1. // 1、不带参数直接跳转
  2. <router-link to='/testDemo'>
  3. <button>点击跳转1</button>
  4. </router-link>
  5. <router-link :to="{name:'testDemo'}">
  6. <router-link :to="{path:'/testDemo'}"> //name,path都行, 建议用name
  7. // 2、带参数跳转
  8. // (1)query参数
  9. <router-link :to="{path:'testDemo',query:{id:001}}">
  10. <button>点击跳转2</button>
  11. </router-link>
  12. // 类似类似get,url后面会显示参数
  13. // 路由可不配置
  14. // (2)params参数
  15. <router-link :to="{name:'testDemo',params:{setid:002}}">
  16. <button>点击跳转3</button>
  17. </router-link>
  18. // 类似post
  19. // 路由配置 path: "/home/:id" 或者 path: "/home:id"

2、编程式路由导航

  1. import { useRouter } from "vue-router";
  2. const router = useRouter();
  3. //直接跳转
  4. const handleChange = () => {
  5. router.push("/testDemo");
  6. };
  7. //带参数跳转
  8. router.push({path:'/testDemo',query:{id:003}});
  9. router.push({name:'testDemo',params:{id:004}});

到此这篇关于vue3页面跳转的文章就介绍到这了,更多相关vue3页面跳转内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号