路由导航分析和三后台框架路由导航横向对比
创始人
2024-06-03 06:53:53
0

博主菜鸡,有错请各位指出

0、路由导航是什么

路由守卫

router.beforeEach:全局前置守卫。
router.beforeResolve:全局解析守卫。
router.afterEach:全局后置钩子。

组件守卫

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

路由独享守卫

beforeEnter

总结
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

全局守卫

router.beforeEach((to,from,next)=>{})

router.beforeEach((to,from,next)=>{if(to.path == '/login' || to.path == '/register'){next();}else{alert('您还没有登录,请先登录');next('/login');}
})

router.afterEach((to,from)=>{})
只有两个参数,to:进入到哪个路由去,from:从哪个路由离。

组件内守卫

到达组件时
beforeRouteEnter:(to,from,next)=>{}


离开组件时
beforeRouteLeave:(to,from,next)=>{}
点击其他组件时,判断是否确认离开。确认执行next();取消执行next(false),留在当前页面。

beforeRouteLeave:(to,from,next)=>{if(confirm("确定离开此页面吗?") == true){next();}else{next(false);}}

组件更新时
beforeRouteUpdate:(to,from,next)=>{}

  • 当组件内子路由发生变化时,会出发该导航守卫。
  • 当使用 beforeRouteUpdate 导航守卫时,应该等 next() 函数执行后,再获取 params 或 query 中的参数。
  beforeRouteUpdate (to, from, next) {console.log('路由更新之前:从to获取参数', to.params, '从this.$route获取参数', this.$route.params)next()console.log('路由更新之后:从to获取参数', to.params, '从this.$route获取参数', this.$route.params)},

路由独享守卫

beforeEnter:(to,from,next)=>{}
写进其中一个路由对象中,只在这个路由下起作用。

{path:"/login",name:"login",component:"/login",beforeEnter:(to,from,next)=>{next('/login')}
}

1、el-admin

1.1、router.afterEach:全局后置钩子

进度条结束

NProgress.done()

1.2、router.beforeEach:全局前置守卫

index.js

import router from './routers'
import store from '@/store'
import Config from '@/settings'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
import { buildMenus } from '@/api/system/menu'
import { filterAsyncRouter } from '@/store/modules/permission'NProgress.configure({ showSpinner: false })// NProgress Configurationconst whiteList = ['/login']// no redirect whitelist
router.beforeEach((to, from, next) => {if (to.meta.title) {//假如路由组件挂载的时候有写title,则是title-项目名称,Config.title配置了项目名称document.title = to.meta.title + ' - ' + Config.title}NProgress.start()//开启进度条if (getToken()) {if (to.path === '/login') {// 已登录且要跳转的页面是登录页,此时不能进登录页next({ path: '/' })//修改路由为loginNProgress.done()} else {//这块Vuex没看懂if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(() => { // 拉取user_info// 动态路由,拉取菜单loadMenus(next, to)}).catch(() => {store.dispatch('LogOut').then(() => {location.reload() // 为了重新实例化vue-router对象 避免bug})})// 登录时未拉取 菜单,在此处拉取} else if (store.getters.loadMenus) {// 修改成false,防止死循环store.dispatch('updateLoadMenus')loadMenus(next, to)} else {next()//不满足其他条件,放行}}} else {/* has no token*/if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入next()} else {next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页NProgress.done()}}
})export const loadMenus = (next, to) => {buildMenus().then(res => {const sdata = JSON.parse(JSON.stringify(res))const rdata = JSON.parse(JSON.stringify(res))const sidebarRoutes = filterAsyncRouter(sdata)const rewriteRoutes = filterAsyncRouter(rdata, false, true)rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由router.addRoutes(rewriteRoutes) // 动态添加可访问路由表next({ ...to, replace: true })})store.dispatch('SetSidebarRouters', sidebarRoutes)})
}

permission.js

import { constantRouterMap } from '@/router/routers'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView'const permission = {state: {routers: constantRouterMap,addRouters: [],sidebarRouters: []},mutations: {SET_ROUTERS: (state, routers) => {state.addRouters = routersstate.routers = constantRouterMap.concat(routers)},SET_SIDEBAR_ROUTERS: (state, routers) => {state.sidebarRouters = constantRouterMap.concat(routers)}},actions: {GenerateRoutes({ commit }, asyncRouter) {commit('SET_ROUTERS', asyncRouter)},SetSidebarRouters({ commit }, sidebarRouter) {commit('SET_SIDEBAR_ROUTERS', sidebarRouter)}}
}export const filterAsyncRouter = (routers, lastRouter = false, type = false) => { // 遍历后台传来的路由字符串,转换为组件对象return routers.filter(router => {if (type && router.children) {router.children = filterChildren(router.children)}if (router.component) {if (router.component === 'Layout') { // Layout组件特殊处理router.component = Layout} else if (router.component === 'ParentView') {router.component = ParentView} else {const component = router.componentrouter.component = loadView(component)}}if (router.children != null && router.children && router.children.length) {router.children = filterAsyncRouter(router.children, router, type)} else {delete router['children']delete router['redirect']}return true})
}function filterChildren(childrenMap, lastRouter = false) {var children = []childrenMap.forEach((el, index) => {if (el.children && el.children.length) {if (el.component === 'ParentView') {el.children.forEach(c => {c.path = el.path + '/' + c.pathif (c.children && c.children.length) {children = children.concat(filterChildren(c.children, c))return}children.push(c)})return}}if (lastRouter) {el.path = lastRouter.path + '/' + el.path}children = children.concat(el)})return children
}export const loadView = (view) => {return (resolve) => require([`@/views/${view}`], resolve)
}
export default permission

2、Vue-beautiful-admin

3、Blade-X

相关内容

热门资讯

阿索卡·塔诺为什么没有在星球大... 阿索卡·塔诺为什么没有在星球大战正传出现?阿索卡没有听说过,,是什么鬼阿索卡是阿纳金年轻时收的徒弟 ...
河北公布第二批美丽河湖名单,1... 转自:河北新闻网河北公布第二批美丽河湖名单,15个河湖入选全省美丽河湖总数达26个河北日报讯(记者马...
热血英豪灵异少女带幻影水晶 热血英豪灵异少女带幻影水晶我看见有人用灵异带幻影能幻影出灵异的ZXC,怎么弄的? 是不是他改了...
潍柴:自主锻造“国产引擎” 加... 历时10年,投入1.2亿元,接连突破甲醇发动机抗机油乳化技术、低温冷启动技术、控早燃爆震技术等多项行...
西班牙多地将出现强降雨等极端天... 来源:央视新闻客户端当地时间7月10日,西班牙国家气象局警告称,当地时间11日起,该国多个地区将出现...
来中国前,黄仁勋先去见了特朗普   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! 【文/观察者网 柳...
警惕虚假宣传诱导网络贷款的风险 转自:中国银行保险报网□本报记者 仇兆燕7月10日,金融监管总局金融消费者权益保护局发布风险提示,提...
比特币突破11.7万美元 续创... .ct_hqimg {margin: 10px 0;} .hqimg_wrapper {text-a...
翼年代记漫画最近章节都说什么了... 翼年代记漫画最近章节都说什么了?OVA《东京默示录》是漫画107话到135话的内容,漫画要从136话...
中国天瑞水泥遭Yu Kuo C... .ct_hqimg {margin: 10px 0;} .hqimg_wrapper {text-a...