在vue3中：几种跳转单文件组件的方法

一般你在公司开发的话，一个系统内的标签页。用router.push就行，除非没在全局路由守卫添加标签页信息（一般是个数组保存的）（自己思索的，公司买的管理系统我没去找这部分代码，后面维护到这部分再回来编辑）

//这个方法是一个vxe-table表格组件的单元格点击事件
const cellClickDetails = async ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, triggerRadio, triggerCheckbox, triggerTreeNode, triggerExpandNode, $event }) =>{   

    if(column.field == "no"){
        //注：router.push的query和status方式存在问题：
        //目标页是缓存组件，会造成我点1的编号，回来再点2的编号，依然会显示2的编号
        //解决：使用keep-alive的activated或者beforeRouteEnter解决，重新获取新的no
        //(composition api 里用beforeRouteEnter要引东西，还是用activated)

        //目前采用router.push的query方式  如果以后要换就直接改
        //1、方式一    抽屉或者弹窗装这个单文件组件
        //（可以搜一下怎么弄，这种一般都是公司抄好的开源或者自己弄了个）
        
        //方式二   不改变路由，且刷新后就拿不到参数（params方式被vue3取消了，跳转页接收不到params参数了现在）
        // router.push({ name: 'name', params: { no: row.no } }, () => {
        //     //单独处理params
        // });
        // router.push({ path: '/path/index', params: { no: row.no } }, () => {
        //     //单独处理params
        // });

        //方式二  替代被移除的params，标签页内不会刷新状态除非刷新页面。
        // router.push({ name: 'name', state: { no: row.no } }, () => {
        //     //单独处理params
        // });
        //目标页获取使用
        // if(history && history.state && isAys){
        //     console.log(history)
        //     no.value = history.state.no
        // }
        
        //方式三   地址栏展示路由和参数，但是会刷新当前页。
        router.push({ path: '/path/index', query: { no: row.no } }, () => {
            //因keep-alive需使用activated刷新状态的原因，不与新窗口共用方法处理

            // 若使用浏览器新标签页则不考虑keep-alive中使用onActivated的情况
            // if(route && route.query && route.query.no){
            //     no.value= route.query.no
            // }
        });

        // //方式三   地址栏展示路由和参数,且新窗口打开。不需要考虑keep-alive
        // // 构建带参数的 URL
        // const url = `/path/index?no=${row.no}`;
        // // // 在新窗口中打开 URL
        // window.open(url, '_blank', 'noopener,noreferrer');
        //目标页获取使用
        // 若使用浏览器新标签页则不考虑keep-alive中使用onActivated的情况
        // if(route && route.query && route.query.no){
        //     no.value= route.query.no
        // }
    }

}