1.問題之路由守衛(wèi)

? ? ? 初寫路由守衛(wèi)，對(duì)于next()的理解不是很透徹，就想著都放行，不然看不到效果，結(jié)果控制臺(tái)出現(xiàn)了警告，想著報(bào)黃的問題就不是問題，但仔細(xì)一看發(fā)現(xiàn)他說，如果再生產(chǎn)階段就會(huì)失敗，就覺得有必要解決一下

?以下是我的代碼

//路由鑒權(quán)
import router from "@/router"import nprogress from "nprogress"
//引入進(jìn)度條的樣式
import "nprogress/nprogress.css"//刪除加載進(jìn)度條傍邊的小球
nprogress.configure({showSpinner:false})
//引入小倉庫
import { store } from "@/stores/modules/user"
import pinia from "./stores" //在外部使用小倉庫之前的引入大倉庫,否則會(huì)報(bào)錯(cuò)，可以理解為倉庫時(shí)通過大倉庫的create而建立，沒有引入大倉庫，小倉庫就不存在，而組件內(nèi)是因?yàn)樵趍ain.ts中通過use()使用了
let useStore = store(pinia) //然后將pinia傳進(jìn)去
//console.log(useStore)
//全局守衛(wèi)：項(xiàng)目當(dāng)中任意路由切換都會(huì)觸發(fā)的鉤子
//全局前置首位router.beforeEach(async (to: any, from: any, next: any) => {//瀏覽器任務(wù)欄的名字document.title = to.meta.title//to:你將要訪問的路由對(duì)象//from:你從哪個(gè)路由而來//next:路由的放行函數(shù)//console.log(nprogress)nprogress.start();let token = useStore.token;//獲取用戶信息let userinfo = useStore.netName//通過token來鑒別是否登錄成功if (token) {//登錄成功，不能訪問login，指向首頁if (to.path == "/login") {next({ path: '/' })}//登錄成功訪問其余幾個(gè)路由else {//有用戶信息if (userinfo) {//放行next();} else {//如果沒有用戶信息，先獲取用戶信息再放行try {//獲取用戶信息await useStore.userInfo()//放行next();} catch (error) {//token過期：獲取不到用戶信息//用戶手動(dòng)修改了本地儲(chǔ)存的token//退出登錄 用戶相關(guān)的數(shù)據(jù)清空useStore.userOutLogin();next({ path: '/login', query: { redirect: to.path } })}}}} else {if (to.path == '/login') {next();} else {next({ path: '/login', query: { redirect: to.path } }) //返回登陸頁面，并在地址欄中添加你想去的頁面，登錄成功后可以直接去}}//問題所在next();
})
//全局后置首位
router.afterEach(() => {nprogress.done();})

問題所在我特意加了很多空行，報(bào)黃的原因是路由導(dǎo)航執(zhí)行了兩次next函數(shù)，只要把最下面的next函數(shù)善刪了就OK了

2.問題之el-menu

? ? ? ? 這個(gè)問題是我純屬眼瞎

? ? ? ? 以下是代碼

<script setup lang='ts'>
import { ref, onMounted } from "vue"
import Menu from "../menu/test.vue"
//引入路由
import { useRouter } from "vue-router";//獲取路由器對(duì)象
let router = useRouter();
//接收路由數(shù)組
defineProps({menuList: Object,
})const goRouter = (item: any) => {//路由跳轉(zhuǎn)router.push(item.index)
}
</script><template><div class="menu-container"><template v-for="(item, index) in menuList"><template v-if="!(item.meta as any).hidden"><!--  無子路由  --><el-menu-item :index="item.path" v-if="!item.children" @click="goRouter"><template #title>  <el-icon><component :is="(item.meta as any).icon"></component></el-icon><span>{{ (item.meta as any).title }}</span></template></el-menu-item><!--  僅一個(gè)子路由  --><el-menu-item :index="item.path" v-if="item.children && item.children.length == 1" @click="goRouter"><template #title><el-icon><component :is="(item.children[0].meta as any).icon"></component></el-icon><span>{{ (item.children[0].meta as any).title }}</span></template></el-menu-item><!--  一子路由以上  --><el-sub-menu v-if="item.children && item.children.length > 1" :index="item.children[0].path"><template #title><el-icon><component :is="(item.meta as any).icon"></component></el-icon><span>{{ (item.meta as any).title }}</span></template><Menu :menuList="item.children"></Menu></el-sub-menu></template></template></div>
</template><style lang="less" scoped></style>

最后的頁面，（折疊后的菜單）

預(yù)期的樣子

?產(chǎn)生的原因：將圖標(biāo)放到插槽title里面，導(dǎo)致圖標(biāo)和標(biāo)題一起折疊，el-sub-menu與el-menu-item有些不一樣，他的圖標(biāo)是放在插槽里的，也正是這個(gè)原因使搞混了，看文檔一定要仔細(xì)，我因?yàn)檫@問題耽誤了有近兩個(gè)小時(shí)（還有一點(diǎn)是因?yàn)槲也粣劭次臋n，這毛病的改了）

解決：將圖標(biāo)放到外面

如：

 <el-menu-item :index="item.path" v-if="!item.children" @click="goRouter"><el-icon><component :is="(item.meta as any).icon"></component></el-icon><template #title><span>{{ (item.meta as any).title }}</span></template>
</el-menu-item>

3.問題之內(nèi)容區(qū)跳轉(zhuǎn)

?一般做某某管理系統(tǒng)，點(diǎn)擊不同的菜單，內(nèi)容區(qū)跳轉(zhuǎn)到不同的內(nèi)容路由，所以要跳轉(zhuǎn)路由的一路由必須為主頁的路由

如：

  {path: '/',component: () => import('@/views/main/index.vue'),  //這個(gè)路由為由組件拼成的主頁面name: '/',meta: {title: "",hidden: false,icon:'',},redirect:'/home',children:[{path:'/home',component: ()=> import('@/views/home/index.vue'),name:'home',meta:{title: "首頁",hidden: false,icon:'House'}} ]}
,
{path: '/goodsMange',component: () => import('@/views/main/index.vue'),  //第一次寫的時(shí)候?qū)懥似渌陆ǖ奈募徽麄€(gè)頁面都跳了name:'goodsMange',meta:{title:'商品管理',hidden:false,icon:'Goods',},redirect: '/goodsMange/SKU',children: [{path: '/goodsMange/SKU',component: ()=> import('@/views/goodsManage/SKU/index.vue'),name:'sku',meta:{title:'SKU',hidden:false,icon:'Goods',},},{path: '/goodsMange/SPU',component: ()=> import('@/views/goodsManage/SPU/index.vue'),name:'spu',meta:{title:'SPU',hidden:false,icon:'Goods',},}]},