vue3页面跳转

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}});