手把手编写儿童手机远程监控App之vue3 路由重构-开发者社区

概述

上节使用AI Agent生成水平排列的按钮，Copilot 还是非常好用，代码提示补全，开发非常的贴心。
嘟宝是为监督孩子身边环境而创建的一套应用，它能够实现后台驻留长连接，随时接收嘟妈信令，建立音视频通道点对点通信，而不需要中转服务器。嘟妈是一套WEB 应用，使用vue3编写，能够兼容app、小程序开发。而嘟宝采用原生Andorid开发，能够获取最大权限，保持在后台运行。
目前为止，嘟宝完成的基本功能设计包括

MQTT 基础通信
后台驻留
SQLite数据存储
二维码显示身份识别码
开启自启动前台服务
任务栏消息发送与点击
高德定位实时更新
webrtc点对点通信
mAgentWeb控件封装解决全屏与获取视频权限问题
嘟妈采用vue3编写它的核心需求已完成包含以下部分:
完成登录注册页面
完成二维码扫描完成与嘟宝绑定
与嘟妈建立音视频通信
查看嘟宝桌面共享视频
目前嘟妈的路由导航如下图：

可以看到，当点击嘟宝时，嘟宝页面并未挡住底部导航栏。应是全屏显示，UI美观。重新组织网页骨架

重新组织网页骨架

router.ts路由信息

import{createRouter,/*createWebHistory,*/createWebHashHistory}from"vue-router";import{getUserData}from'@/api/storge'const routes=[{path:'/',redirect:'/main'},{path:'/home',name:'Home',component:()=>import('@/view/home.vue'),children:[{path:'/main',name:'Main',component:()=>import('@/view/main.vue')},{path:'/code',name:'Code',component:()=>import('@/view/qrcode.vue')},{path:'/me',name:'me',component:()=>import('@/view/me.vue')},]},{path:'/dubao/:dubaoId',name:'Dubao',component:()=>import('@/view/dubao.vue')},{path:'/login',name:'login',component:()=>import('@/view/login.vue')},]const router=createRouter({// history: createWebHistory(),history:createWebHashHistory(),routes:routes})router.beforeEach((to)=>{const token=getUserData();if(!token&&to.path!=='/login'){return{path:'/login'}}returntrue})export default router;

app.vue源码

<template><div class="app"><router-view v-slot="{ Component }"><transition name="fade"mode="out-in"><component:is="Component"/></transition></router-view></div></template><script setup lang="ts">import{onMounted,onUnmounted}from'vue'import{useMQTTStore}from'./store/mqtt';const mqtt=useMQTTStore()mqtt.$subscribe(async(mutate:any,state)=>{if(typeof mutate.events.newValue==='boolean'){return;}let data=JSON.parse(state.datamsg);let msg=JSON.parse(data.msg);switch(msg.code){case'answer':break;case'ice':default:break;}});onMounted(()=>{mqtt.connect();})onUnmounted(()=>{mqtt.disconnect();});</script>

home.vue主页页面

<template><div class="app"><!--路由视图--><div class="main"><router-view v-slot="{ Component }"><transition name="fade"mode="out-in"><component:is="Component"/></transition></router-view></div><!--底部 Tabbar（使用 Vant4语法）--><van-tabbar route fixed placeholder><van-tabbar-item replace to="/main"icon="home-o">首页</van-tabbar-item><van-tabbar-item replace to="/code"icon="scan">扫一扫</van-tabbar-item><van-tabbar-item replace to="/me"icon="friends-o">我的</van-tabbar-item></van-tabbar></div></template><script setup lang="ts"></script>