vue3頁面跳轉的兩種方式

Posted on by

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

到此這篇關於vue3頁面跳轉的文章就介紹到這瞭,更多相關vue3頁面跳轉內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：