uni-simple-router的vue3版本跳转传值params拿不到？

Question

我用的uniapp，但用的vue3，购买的uni-simple-router的vue3版本，

<script setup>
    import {reactive,computed} from 'vue'
    import {onShow} from '@dcloudio/uni-app'    
    import router from '@/router'
</script>

其中 import router from '@/router'的代码为：

import {createRouter,toIsNewWindow} from '@/uni-simple-router'
import {routes} from './routes'
import {nextTick,createApp} from 'vue'
import {timeOut} from '~@/utils/index.js'
import FloatLayerCom from '@/components/float-layer.vue'
import {isEmpty,isWechat} from "@/utils/filter.js"
import BASE_URL from '@/utils/env.js' 

// #ifdef H5
    const floatLayerApp = createApp(FloatLayerCom);
    const mountEl = document.createElement(`div`);
    mountEl.id="floatLayerApp";
    document.body.appendChild(mountEl);
    floatLayerApp.mount(`#floatLayerApp`)
// #endif

function androidQuitApp(){
    uni.showModal({
        title: '退出应用',
        content: `你确定要退出本应用？`,
        success:  ({confirm})=>{
            confirm && plus.runtime.quit();
        }
    });
}

function changeFloat(status,to){
    // #ifdef H5
    if(to.navType!==`back`){
        floatLayerApp._instance.setupState.toggleFloat(status);
    }
    // #endif
}

/**
 * 是否开启随机动画
 */
const randomAnimation = true;

const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,
    routeNotFound:(to)=>{
        return {
            name:`404`,
            navType:`push`
        }
    },
    applet:{
        launchedHook:()=>{
            console.log(`首页进入成功`)
        },
        // hideHomeButton:true
    },
    app:{
        setSideSlipGesture:(to)=>{
            return `close`
        },
        runtimeQuit:androidQuitApp
    },
    h5:{
        animation:{
            includeNavtype:[`push`,`back`,`replace`],
            animationTime:0,
            animationAppEl:(to,from)=>{
                if(toIsNewWindow(to,from)){
                    return document.querySelector(`#app`)
                }
                if(to.meta && to?.meta?.animationEl && to?.meta?.navType === to.navType){
                    return document.querySelector(to.meta.animationEl)
                }
                return null
            },
            defaultAnimationType:(to)=>{
                let animationType = `animate__slideInRight`;
                if(randomAnimation){
                    const animationNode = [
                        `animate__slideInRight`,
                        `animate__bounceInRight`,
                        `animate__rotateInDownLeft`,
                        `animate__zoomInDown`
                    ]
                    animationType = animationNode[
                        parseInt(
                            Math.random()*animationNode.length
                        )
                    ]
                }
                if(to?.meta?.animation && to?.meta?.navType === to.navType){
                    animationType = to.meta.animation
                }
                return animationType
            },
            animationNodeMap:{
                'animate__slideInRight':[
                    // 前进
                    [`animate__slideInRight`,`animate__slideOutLeft`],
                    // 后退
                    [`animate__slideInLeft`,`animate__slideOutRight`],
                ],
                'animate__bounceInRight':[
                    // 前进
                    [`animate__bounceInRight`,`animate__bounceOutLeft`],
                    // 后退
                    [`animate__bounceInLeft`,`animate__bounceOutRight`],
                ],
                'animate__rotateInDownLeft':[
                    // 前进
                    [`animate__rotateInDownLeft`,`animate__rotateOutDownLeft`],
                    // 后退
                    [`animate__rotateInDownRight`,`animate__rotateOutDownRight`],
                ],
                'animate__zoomInDown':[
                    // 前进
                    [`animate__zoomInDown`,`animate__zoomOutDown`],
                    // 后退
                    [`animate__zoomInUp`,`animate__zoomOutDown`],
                ],
                // 给路由定义的动画
                'child_router_animate':[
                    // 前进
                    [`animate__slideInUp`]
                ]
            }
        }
    },
    routes,
})
let appRunCount = 0
//全局路由前置守卫
router.beforeEach(async (to,from)=>{
    console.error(`------- beforeEach守卫执行 ------`)
    console.log(to)
    console.log(from)
    changeFloat(`load`,to);
    if (to.path.indexOf("/api/") > 0) {
        return true;
        return;
    }
    if (to.name == "wxauth") { //微信授权
        return true;
        return;
    }
    if (to.name == "wxauthmp") { //微信小程序授权
        return true;
        return;
    }
    let token = uni.getStorageSync("token")
    //token='Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MDQwOSIsImlhdCI6IjE2OTU3Nzk4NTAiLCJuYmYiOiIxNjk1Nzc5ODUwIiwiZXhwIjoiMTcwMDk2Mzg1MCIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvZXhwaXJhdGlvbiI6IjIwMjMvMTEvMjYgOTo1NzozMCIsImlzcyI6IlN5c3RlbSIsImF1ZCI6IlVzZXIiLCJodHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dzLzIwMDgvMDYvaWRlbnRpdHkvY2xhaW1zL3JvbGUiOiIxIiwiVXNlcklkIjoiNjA0MDkiLCJPcGVuSWQiOiJvemRIVjVYMjRaMmNWV2M4dmJ5UUN5M3FodU5BIiwiU291cmNlIjoiMSJ9.ukSbwH5deboT7ohLCwpA8EU0y2um4iQmdbEpyjpWj3g'
    if (isEmpty(token)) {
        // 保存当前路由地址，授权后还会跳到此地址
        //#ifdef H5
        
        /*
        if (isWechat()) {
            console.log('微信公众号授权处理');
            uni.setStorageSync('wxRedirectUrl', to.fullPath);
            uni.request({
                url: BASE_URL + "/WX/GetAuthCode",
                method: "POST",
                success: (res) => {
                    if (res.data.Code == 0) {
                        console.log("地址来源:" + to.name);
                        console.log(res.data.Msg);
                        alert("该功能目前只支持在'支付宝'端使用")
                        //window.location.href = res.data.Msg
                    } else {
                        return true;
                        return;
                    }
                }
            })
        } else {
            console.log('支付宝生活号H5授权处理');
            uni.setStorageSync('wxRedirectUrl', to.fullPath);
            uni.request({
                url: BASE_URL + "/ZFB/GetAuthCode",
                method: "POST",
                success: (res) => {
                    if (res.data.Code == 0) {
                        console.log(res.data.Msg);
                        window.location.href = res.data.Msg
                    } else {
                        return true;
                        return;
                    }
                }
            })
        }
        */
        //#endif
    } else {
        return true;
    }
    
})
// 全局路由后置守卫
router.afterEach(async (to,from)=>{
    console.error(`++++++ afterEach守卫执行 +++++++`)
    console.log(router)
    
    changeFloat(`success`,to);
    
    if(to.meta && to.meta.title){
        // #ifdef H5
        await timeOut(1)
        // #endif
        uni.setNavigationBarTitle({
            title:to.meta.title
        })
    }
})

router.onError(e=>{
    console.log(e)
})

export default router

我现在想点击链接跳转时带参数：

const goNotice=(row)=>{
        console.log(row)
        router.push({
            name:'notice',
            params:{"id":2323}
        })
    }

接受页面死活拿不到params的值：

<script setup>
    import {reactive,computed,watch,onMounted} from 'vue'
    import {onShow} from '@dcloudio/uni-app'
    import BaseTab from '@/pages/common/base-tabbar.vue'
    import leftArrow from '@/pages/common/leftArrow.vue'
    import * as api from '@/utils/api.js'
    import {timeOut} from '~@/utils/index.js'
    import router from '@/router'
    import {useRoute} from '@/uni-simple-router'
    const route = useRoute()
    const data=reactive({
        
    })

    onShow(()=>{
        console.log('onShow')
        console.log("xxxxx")
        console.log(route.value)
    })

    
</script>

做了各种尝试，就是不行。

Answer 1

params传参你应当使用 动态路由匹配 例如/pages/:id

跳转时用

router.push({
    name:`xxx`,
    params:{
        id:123
    }
})

如果你希望是URL上的query传参，请使用如下方式

router.push({
    name:`xxxx`,
    query:{
        id:123
    }
})