做网站 用 云主机,免费软件漫画,东莞网站建站服务公司,上海优质网站seo有哪些1.问题之路由守卫 初写路由守卫#xff0c;对于next()的理解不是很透彻#xff0c;就想着都放行#xff0c;不然看不到效果#xff0c;结果控制台出现了警告#xff0c;想着报黄的问题就不是问题#xff0c;但仔细一看发现他说#xff0c;如果再生产阶段就会失败#x…1.问题之路由守卫 初写路由守卫对于next()的理解不是很透彻就想着都放行不然看不到效果结果控制台出现了警告想着报黄的问题就不是问题但仔细一看发现他说如果再生产阶段就会失败就觉得有必要解决一下 以下是我的代码
//路由鉴权
import router from /routerimport nprogress from nprogress
//引入进度条的样式
import nprogress/nprogress.css//删除加载进度条傍边的小球
nprogress.configure({showSpinner:false})
//引入小仓库
import { store } from /stores/modules/user
import pinia from ./stores //在外部使用小仓库之前的引入大仓库,否则会报错可以理解为仓库时通过大仓库的create而建立没有引入大仓库小仓库就不存在而组件内是因为在main.ts中通过use()使用了
let useStore store(pinia) //然后将pinia传进去
//console.log(useStore)
//全局守卫项目当中任意路由切换都会触发的钩子
//全局前置首位router.beforeEach(async (to: any, from: any, next: any) {//浏览器任务栏的名字document.title to.meta.title//to:你将要访问的路由对象//from:你从哪个路由而来//next:路由的放行函数//console.log(nprogress)nprogress.start();let token useStore.token;//获取用户信息let userinfo useStore.netName//通过token来鉴别是否登录成功if (token) {//登录成功不能访问login指向首页if (to.path /login) {next({ path: / })}//登录成功访问其余几个路由else {//有用户信息if (userinfo) {//放行next();} else {//如果没有用户信息先获取用户信息再放行try {//获取用户信息await useStore.userInfo()//放行next();} catch (error) {//token过期获取不到用户信息//用户手动修改了本地储存的token//退出登录 用户相关的数据清空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();})
问题所在我特意加了很多空行报黄的原因是路由导航执行了两次next函数只要把最下面的next函数善删了就OK了
2.问题之el-menu 这个问题是我纯属眼瞎 以下是代码
script setup langts
import { ref, onMounted } from vue
import Menu from ../menu/test.vue
//引入路由
import { useRouter } from vue-router;//获取路由器对象
let router useRouter();
//接收路由数组
defineProps({menuList: Object,
})const goRouter (item: any) {//路由跳转router.push(item.index)
}
/scripttemplatediv classmenu-containertemplate v-for(item, index) in menuListtemplate v-if!(item.meta as any).hidden!-- 无子路由 --el-menu-item :indexitem.path v-if!item.children clickgoRoutertemplate #title el-iconcomponent :is(item.meta as any).icon/component/el-iconspan{{ (item.meta as any).title }}/span/template/el-menu-item!-- 仅一个子路由 --el-menu-item :indexitem.path v-ifitem.children item.children.length 1 clickgoRoutertemplate #titleel-iconcomponent :is(item.children[0].meta as any).icon/component/el-iconspan{{ (item.children[0].meta as any).title }}/span/template/el-menu-item!-- 一子路由以上 --el-sub-menu v-ifitem.children item.children.length 1 :indexitem.children[0].pathtemplate #titleel-iconcomponent :is(item.meta as any).icon/component/el-iconspan{{ (item.meta as any).title }}/span/templateMenu :menuListitem.children/Menu/el-sub-menu/template/template/div
/templatestyle langless scoped/style
最后的页面折叠后的菜单 预期的样子 产生的原因将图标放到插槽title里面导致图标和标题一起折叠el-sub-menu与el-menu-item有些不一样他的图标是放在插槽里的也正是这个原因使搞混了看文档一定要仔细我因为这问题耽误了有近两个小时还有一点是因为我不爱看文档这毛病的改了
解决将图标放到外面
如 el-menu-item :indexitem.path v-if!item.children clickgoRouterel-iconcomponent :is(item.meta as any).icon/component/el-icontemplate #titlespan{{ (item.meta as any).title }}/span/template
/el-menu-item
3.问题之内容区跳转 一般做某某管理系统点击不同的菜单内容区跳转到不同的内容路由所以要跳转路由的一路由必须为主页的路由
如 {path: /,component: () import(/views/main/index.vue), //这个路由为由组件拼成的主页面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), //第一次写的时候写了其他新建的文件一整个页面都跳了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,},}]},
