欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式

 更新時(shí)間：2022年06月29日 11:22:48   作者：騰夢(mèng)  
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

攜帶參數(shù)跳轉(zhuǎn)|router傳參

A頁(yè)面點(diǎn)擊按鈕后攜帶參數(shù)跳轉(zhuǎn)到B頁(yè)面

原理

  • 導(dǎo)入router import { useRouter } from "vue-router";
  • A頁(yè)面?zhèn)鲄outer.push({})
  • B頁(yè)面接收route.params.num;

demo

route.js

{ path: '/A', name:'A',component: () => import('pages/A.vueB') },
{ path: '/B', name:'B',component: () => import('pages/B.vue') }

A頁(yè)面

<template>
  <button @click="go">跳轉(zhuǎn)</button>
</template>
<script>
import { useRouter } from "vue-router";
export default ({
    setup(props, ctx) {
        //router是全局路由對(duì)象，route= userRoute()是當(dāng)前路由對(duì)象
        let router = useRouter();
        const go=()=>{
            router.push({
            //傳遞參數(shù)使用params的話，只能使用name指定(在route.js里面聲明name)
            name:"B",
            params:{
                num:1
            }
            /* 使用query的話，指定path或者name都行
            path:'/home',
            query:{
            num:1
            } */
            })
        }
        return{
            go,
        }
    }
})
</script>

B頁(yè)面

<template>
  {{ num }}
</template>
<script>
import { useRoute } from "vue-router";
export default {
  setup(props, ctx) {
    //router是全局路由對(duì)象，route= userRoute()是當(dāng)前路由對(duì)象
    let route = useRoute();
    const num = route.params.num;
    console.log(num);
    return {
      num,
    };
  },
};
</script>

vue路由跳轉(zhuǎn),參數(shù)的攜帶與獲取

// 參數(shù)的攜帶兩種方式如下
(1) this.$router.push({ name:'orderDetail', params:{id:14} })
(2) this.$router.push({ path:'/microcosm/orderDetail', params:{id:14} })
// 獲取參數(shù) 對(duì)應(yīng)上面的順序
(1) this.$route.params.id
(2) this.$route.query.id

第一種方式

（1）攜帶的參數(shù)沒(méi)有拼接在url地址后面；數(shù)據(jù)比較保密，但是name屬性要在路由表中配置name屬性

（2）但是跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面后，刷新該頁(yè)面攜帶的參數(shù)會(huì)丟失，如果是根據(jù)攜帶參數(shù)獲取的數(shù)據(jù)，會(huì)出現(xiàn)一定的問(wèn)題

第二種方式

（1）攜帶的參數(shù)拼接在url地址后面；不用再路由表中配置name屬性

（2）跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面后，刷新頁(yè)面不會(huì)出現(xiàn)上一個(gè)頁(yè)面攜帶的參數(shù)丟失的情況

以上方式可以根據(jù)項(xiàng)目的需求進(jìn)行選擇。

我本人一般選擇的是第二種方式，一般把數(shù)據(jù)拼接在url后面的，都是一些不重要的數(shù)據(jù)，最重要的是不會(huì)出現(xiàn)刷新頁(yè)面，出現(xiàn)攜帶的數(shù)據(jù)丟失情況 

好了，這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論