vue3页面跳转的两种方式

目录

• 1、标签内 router-link跳转
• 2、编程式路由导航

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

1、

 点击跳转1

2、router.push("/testDemo");

1、标签内 router-link跳转

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

// 1、不带参数直接跳转

 点击跳转1

 
 //name,path都行, 建议用name 
// 2、带参数跳转
// （1）query参数

 点击跳转2

// 类似类似get,url后面会显示参数
// 路由可不配置
// （2）params参数

 点击跳转3

// 类似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}});

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