Vue3使用vue-router如何實現(xiàn)路由跳轉與參數獲取
更新時間：2022年03月30日 12:07:05 作者：青顏的天空
這篇文章主要介紹了Vue3使用vue-router如何實現(xiàn)路由跳轉與參數獲取，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-router實現(xiàn)路由跳轉與參數獲取
路由跳轉和傳參
import { defineComponent, onMounted, reactive, readonly, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
export default defineComponent({
name: 'Login',
setup() {
const router = useRouter(), route = useRoute();
const submitForm = () => {
formRef.value?.validate((valid) => {
if (valid) {
login({ strategy: 'local', ...ruleForm })
.then((res: any) => {
// 獲取參數和路由跳轉
const redirect: string = route.query && route.query.redirect;
if (redirect) {
router.replace(redirect);
} else {
router.push('/home');
}
return true;
})
.catch((e) => {
...
});
} else {
...
return false;
}
});
};
return { ..., submitForm };
}
});
路由跳轉三種方法的總結
一、第一種
1、路由設置方式
{`在這里插入代碼片`
? path: '/detail/:id',
? name: 'detail',
? meta: { keepAlive: true },
? component: () => import('../pages/detail/index')
}2、路由跳轉模式
this.$router.push(
? {
? ? path: `/detail/1`
? }
)3、獲取參數方式
let detailId = this.$route.params.id
注意： params 傳參相當于是路由的一部分是必須傳的東西,經過驗證不傳頁面會跳轉到空白頁
該方式刷新頁面id 不丟失
二、第二種
1、路由設置方式
{
? path: '/detail/:id',
? name: 'detail',
? meta: { keepAlive: true },
? component: () => import('../pages/detail/index')
}2、路由跳轉模式
this.$router.push(
? {
? ? name: 'Detail',
? ? params: {
? ? ? id
? ? }
? }
)3、獲取參數方式
let detailId = this.$route.params.id
注意：此方式傳參 路由設置方式中的 id 可以傳也可以不傳,不傳刷新頁面id 會丟失
該方式刷新頁面id 不丟失
三、第三種
1、路由設置方式
{
? path: '/detail',
? name: 'detail',
? meta: { keepAlive: true },
? component: () => import('../pages/detail/index')
}2、路由跳轉模式
this.$router.push(
? {
? ? path: 'Detail',
? ? query: {
? ? ? id
? ? }
? }
)3、獲取參數方式
let detailId = this.$route.query.id
注意：此方式傳參 路由設置方式中的 id 不能寫，因為寫了就是router 的一部分，這樣就會匹配不到, 此方式刷新頁面id 不丟失
http://localhost:8080/#/detail?id=1
總結： params一旦設置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue下axios攔截器token刷新機制的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue插值、表達式、分隔符、指令的相關知識，文中給大家提到了去除vue插值表達式{{}}的方法,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細介紹了element ui表格實現(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue+axios+WebApi+NPOI導出Excel文件實例方法
在本篇文章里小編給大家整理關于Vue+axios+WebApi+NPOI導出Excel文件的知識點以及實例代碼，需要的朋友們參考下。2019-06-06
要想實現(xiàn)列表的動態(tài)無縫滾動,本文為大家推薦兩款組件,vue-seamless-scroll和vue3-seamless-scroll,組件的用法也非常簡單,下面就跟隨小編一起來學習一下吧2024-11-11
vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果
這篇文章主要為大家詳細介紹了vue+jquery+lodash實現(xiàn)滑動時頂部懸浮固定效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要介紹了詳解vue 兼容IE報錯解決方案，詳細的介紹了幾種原因及其解決方案，非常具有實用價值，需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue抽出組件并傳值實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時應注意的一些問題，希望能幫助到大家2021-09-09
vue中el-tree結合el-switch實現(xiàn)開關狀態(tài)切換
本文主要介紹了vue中el-tree結合el-switch實現(xiàn)開關狀態(tài)切換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-12-12