谁有uni-simple-router vue3版本吗?
uniapp在vue2版本的时候用的uni-simple-router,几乎都是用的这样,可以在vue3的时候uni-simple-router变成收费的了?那现在uniapp vue3在路由这块有其它好的解决方案吗?
安装vue3之后(启用TS、JSX、pinia)但打开route.ts文件,一直报错提示: import HomeView from '../views/HomeView.vue' import Transaction from "@/views/TransactionView.vue"; 在vite.config.js 文件中已经有写了at的别名 "fileURLToPath(new URL('./src', import.meta.url))"。 import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }) "安装选项" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/15601c6e6d427b4e6d08701a818f7e37.png) "一直报错提示" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/50983ce50b2b508c38e448b7d297ad57.png) "已经加入了描述" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/8a638bbff7042d2167929e04e3090ec6.png) 提示找不到,但实际上是存在的,并且webstorm里面点进去是可以打开对应的文件,但一直报红色。
vue3中使用keep-alive中include属性来缓存router-view 在第一层子级下缓存是生效得 但是在第二级缓存就不生效了 const keepAliveName = ["Assembil","table", "from","details1","details2"] // keepAliveName数组中的元素是组件页面上的name值、不是路由上的name值 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241210/8453dbd971a0c93a9d7c2f7eeb54e6b3.png) 最终想实现得是在全局layout实现个页面缓存(不仅只有两级children还会有更多)、通过组件得name值配置或者路由信息配置 请求大佬指教🫡🫡🫡
我用的uniapp,但用的vue3,购买的uni-simple-router的vue3版本, import {reactive,computed} from 'vue' import {onShow} from '@dcloudio/uni-app' import router from '@/router' 其中 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的值: 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) }) "image.png" (https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241030/d773d006d021316f72df212a348c2749.png) 做了各种尝试,就是不行。