当前位置:首页 » 《资源分享》 » 正文

vue3页面跳转

22 人参与  2024年03月22日 15:56  分类 : 《资源分享》  评论

点击全文阅读


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

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

1、标签内 router-link跳转

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

// 1、不带参数直接跳转<router-link to='/testDemo'> <button>点击跳转1</button></router-link><router-link :to="{name:'testDemo'}"> <router-link :to="{path:'/testDemo'}"> //name,path都行, 建议用name   // 2、带参数跳转// (1)query参数<router-link :to="{path:'testDemo',query:{id:001}}"> <button>点击跳转2</button></router-link>// 类似类似get,url后面会显示参数// 路由可不配置  // (2)params参数<router-link :to="{name:'testDemo',params:{setid:002}}"> <button>点击跳转3</button></router-link>// 类似post// 路由配置 path: "/home/:id" 或者 path: "/home:id"

2、编程式路由导航

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

点击全文阅读


本文链接:http://zhangshiyu.com/post/83719.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1