vue跳转方式

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

1.

 点击跳转1


2.router.push("/Demo");

一、标签内通过 router-link跳转

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

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

 点击跳转


 
 //name path都可以 建议用name 
  
// 2. 带参数跳转
// （1）query参数

 点击跳转2


  
// 3. params参数

 点击跳转

二、编程式路由导航

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

原创作者：吴小糖

创作时间：2023.12.21