首页 前端知识 vue3页面跳转

vue3页面跳转

2024-02-11 10:02:22 前端知识 前端哥 898 454 我要收藏

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}});
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1756.html
标签
评论
发布的文章

Jquery-day01

2024-02-25 11:02:14

Jquery的基本认识

2024-02-25 11:02:11

浏览器调用摄像头

2024-02-25 11:02:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!