Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
更新時間：2022年03月30日 12:07:05 作者：青顏的天空
這篇文章主要介紹了Vue3使用vue-router如何實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-router實現(xiàn)路由跳轉(zhuǎn)與參數(shù)獲取
路由跳轉(zhuǎ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) => {
// 獲取參數(shù)和路由跳轉(zhuǎn)
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 };
}
});
路由跳轉(zhuǎn)三種方法的總結(jié)
一、第一種
1、路由設(shè)置方式
{`在這里插入代碼片`
? path: '/detail/:id',
? name: 'detail',
? meta: { keepAlive: true },
? component: () => import('../pages/detail/index')
}2、路由跳轉(zhuǎn)模式
this.$router.push(
? {
? ? path: `/detail/1`
? }
)3、獲取參數(shù)方式
let detailId = this.$route.params.id
注意： params 傳參相當(dāng)于是路由的一部分是必須傳的東西,經(jīng)過驗證不傳頁面會跳轉(zhuǎn)到空白頁
該方式刷新頁面id 不丟失
二、第二種
1、路由設(shè)置方式
{
? path: '/detail/:id',
? name: 'detail',
? meta: { keepAlive: true },
? component: () => import('../pages/detail/index')
}2、路由跳轉(zhuǎn)模式
this.$router.push(
? {
? ? name: 'Detail',
? ? params: {
? ? ? id
? ? }
? }
)3、獲取參數(shù)方式
let detailId = this.$route.params.id
注意：此方式傳參 路由設(shè)置方式中的 id 可以傳也可以不傳,不傳刷新頁面id 會丟失
該方式刷新頁面id 不丟失
三、第三種
1、路由設(shè)置方式
{
? path: '/detail',
? name: 'detail',
? meta: { keepAlive: true },
? component: () => import('../pages/detail/index')
}2、路由跳轉(zhuǎn)模式
this.$router.push(
? {
? ? path: 'Detail',
? ? query: {
? ? ? id
? ? }
? }
)3、獲取參數(shù)方式
let detailId = this.$route.query.id
注意：此方式傳參 路由設(shè)置方式中的 id 不能寫，因為寫了就是router 的一部分，這樣就會匹配不到, 此方式刷新頁面id 不丟失
http://localhost:8080/#/detail?id=1
總結(jié)： params一旦設(shè)置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉(zhuǎn)的時候沒有傳這個參數(shù)，會導(dǎo)致跳轉(zhuǎn)失敗或者頁面會沒有內(nèi)容。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實例詳解(params/query)
- Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
- vue-router路由傳參及隱藏參數(shù)問題
- vue-router如何實時動態(tài)替換路由參數(shù)(地址欄參數(shù))
- 如何處理vue router 路由傳參刷新頁面參數(shù)丟失
- vue router動態(tài)路由設(shè)置參數(shù)可選問題
- vue-router路由參數(shù)刷新消失的問題解決方法
- 詳解vue-router2.0動態(tài)路由獲取參數(shù)
- Vue Router中獲取路由傳遞過來的參數(shù)(方法詳解)
相關(guān)文章
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部兩種類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
vue2.0構(gòu)建單頁應(yīng)用最佳實戰(zhàn)
這篇文章主要為大家分享了vue2.0構(gòu)建單頁應(yīng)用最佳實戰(zhàn)案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要介紹了Vue提示框組件vue-notification使用詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細(xì)介紹Vue自定義指令的詳細(xì)內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家介紹了vue?tailwindcss安裝配置教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
vue的特點之一是組件化開發(fā)，那么問題來了，組件中的數(shù)據(jù)和方法都是獨立的，我們?nèi)绾芜M(jìn)行組件之間的交互呢。這個時候就要用到組件傳參了2022-07-07
這篇文章主要介紹了基于Vue實現(xiàn)電商SKU組合算法問題 ，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了VUE實現(xiàn)token登錄驗證,詳細(xì)記錄實現(xiàn)token登錄驗證的步驟，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vuejs-手把手教你寫一個完整的購物車實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07