路由动态标题

详情页缓存测试

vue/src/layout/components/Navbar/style.scss

@@ -42,15 +42,12 @@
 
         .avatar-container {
             .avatar-wrapper {
-                margin-top: 2px;
+                display: flex;
-
+                align-items: center;
-                .el-avatar {
+                height: 100%;
-                    position: relative;
-                    top: 5px;
-                    margin-right: 5px;
-                }
 
                 span {
+                    margin-right: 5px;
                     font-size: 18px;
                 }
             }

vue/src/router/authority/modules/purchase.js

@@ -17,13 +17,21 @@ const router = {
         {
             path: 'order/detail/:type(see|add|edit)/:id?',
             name: 'purchaseOrderDetail',
-            hidden: true,
             props: true,
             component: lazyLoadView(import('@/views/purchase/order/detail')),
             meta: {
-                title: '采购订单详情',
+                dynamicTitle(to) {
+                    const {type, id} = to.params
+                    switch (type) {
+                        case 'add':
+                            return '添加采购订单'
+                        case 'edit':
+                            return `编辑采购订单${id}`
+                        case 'see':
+                            return `查看采购订单${id}`
+                    }
+                },
                 activeMenu: '/document/purchase/order',
-                noCache: true,
                 isDetailPage: true
             }
         },
@@ -36,13 +44,21 @@ const router = {
         {
             path: 'inbound/detail/:type(see|add|edit)/:id?',
             name: 'purchaseInboundDetail',
-            hidden: true,
             props: true,
             component: lazyLoadView(import('@/views/purchase/inbound/detail')),
             meta: {
-                title: '采购入库详情',
+                dynamicTitle(to) {
+                    const {type, id} = to.params
+                    switch (type) {
+                        case 'add':
+                            return '添加采购入库单'
+                        case 'edit':
+                            return `编辑采购入库单${id}`
+                        case 'see':
+                            return `查看采购入库单${id}`
+                    }
+                },
                 activeMenu: '/document/purchase/inbound',
-                noCache: true,
                 isDetailPage: true
             }
         }

vue/src/router/authority/modules/sell.js

@@ -17,13 +17,21 @@ const router = {
         {
             path: 'order/detail/:type(see|add|edit)/:id?',
             name: 'sellOrderDetail',
-            hidden: true,
             props: true,
             component: lazyLoadView(import('@/views/sell/order/detail')),
             meta: {
-                title: '销售订单详情',
+                dynamicTitle(to) {
+                    const {type, id} = to.params
+                    switch (type) {
+                        case 'add':
+                            return '添加销售订单'
+                        case 'edit':
+                            return `编辑销售订单${id}`
+                        case 'see':
+                            return `查看销售订单${id}`
+                    }
+                },
                 activeMenu: '/document/sell/order',
-                noCache: true,
                 isDetailPage: true
             }
         },
@@ -36,13 +44,21 @@ const router = {
         {
             path: 'outbound/detail/:type(see|add|edit)/:id?',
             name: 'purchaseOutboundDetail',
-            hidden: true,
             props: true,
             component: lazyLoadView(import('@/views/sell/outbound/detail')),
             meta: {
-                title: '销售出库详情',
+                dynamicTitle(to) {
+                    const {type, id} = to.params
+                    switch (type) {
+                        case 'add':
+                            return '添加销售出库单'
+                        case 'edit':
+                            return `编辑销售出库单${id}`
+                        case 'see':
+                            return `查看销售出库单${id}`
+                    }
+                },
                 activeMenu: '/document/outbound/order',
-                noCache: true,
                 isDetailPage: true
             }
         }

vue/src/router/index.js

@@ -3,11 +3,11 @@
 *
 * 需要鉴权的路由：!meta.noAuth
 * 左侧菜单显示：name && !hidden && meta.title
-* 左侧菜单排序：能显示 && sort，升序排列
+* 左侧菜单排序：能在左侧菜单中显示 && sort，升序排列
 * 左侧菜单不折叠只有一个children的路由：alwaysShow
-* 面包屑显示：meta.title
+* 面包屑显示：meta.title || meta.dynamicTitle
 * 搜索选项显示：name && meta.title
-* tab栏显示：name && meta.title
+* tab栏显示：name && (meta.title || meta.dynamicTitle)
 * tab栏固定显示：meta.affix
 * 页面不缓存：!name && !meta.isDetailPage || meta.noCache
 * 打开iframe：meta.iframe，不会重复打开相同src的iframe
@@ -18,7 +18,7 @@ import store from "@/store"
 import NProgress from 'nprogress'
 import {isUserExist} from "@/utils/storage"
 import {auth, needAuth} from "@/utils/auth"
-import {getPageTitle, transformWhiteList, metaExtend} from './util'
+import {setPageTitle, specifyRouteTitle, transformWhiteList, metaExtend} from './util'
 import {contextPath, routerMode} from '@/config'
 import constantRoutes from '@/router/constant'
 import authorityRoutes from '@/router/authority'
@@ -27,13 +27,13 @@ Vue.use(Router)
 
 NProgress.configure({showSpinner: false})
 
+metaExtend(constantRoutes)
+metaExtend(authorityRoutes)
+
 const endRoute = [{path: '*', redirect: '/404', hidden: true}]
 
 const whiteList = transformWhiteList(['/login', '/register', '/404', '/403'])
 
-metaExtend(constantRoutes)
-metaExtend(authorityRoutes)
-
 const router = new Router({
     base: contextPath,
     mode: routerMode,
@@ -45,29 +45,22 @@ router.beforeEach(async (to, from, next) => {
     //使用redirect进行跳转时不显示进度条
     !to.path.startsWith('/redirect') && NProgress.start()
 
-    //若是详情页之间的跳转，借助redirect避免组件复用
+    if (needExtraRedirect(to, from)) {
-    const isToDetailPage = to.meta && to.meta.isDetailPage,
+        //这里vue-router会报redirect错误，已在main.js中忽略
-        isFromDetailPage = from.meta && from.meta.isDetailPage
+        return next(`/redirect${to.fullPath}`)
-    if (isToDetailPage !== undefined && isToDetailPage === isFromDetailPage) {
-        //这里vue-router会报redirect错误
-        return next({path: `/redirect${to.path}`, query: to.query})
     }
 
-    document.title = getPageTitle(to)
+    specifyRouteTitle(to, from)
+
+    setPageTitle(to)
 
     //白名单内不需要进行权限控制
     if (whiteList.some(reg => reg.test(to.path))) return next()
 
-    const isLogin = isUserExist()
-
     //未登录时返回登录页
-    if (!isLogin) return next({path: '/login', query: {redirect: to.fullPath}})
+    if (!isUserExist()) return next({path: '/login', query: {redirect: to.fullPath}})
 
-    //初始化菜单
+    await initMenuAndResource()
-    await initMenu()
-
-    //已登录时访问登录页则跳转至首页
-    if (to.path === '/login') return next({path: '/'})
 
     //页面不需要鉴权或有访问权限时通过
     if (!needAuth(to) || auth(to.path)) {
@@ -76,13 +69,22 @@ router.beforeEach(async (to, from, next) => {
     }
 
     //用户无权限访问时的动作
-    next({path: '/403'})
+    next('/403')
 })
 
 router.afterEach(() => NProgress.done())
 
+//判断是否需要一次额外的redirect跳转
+function needExtraRedirect(to, from) {
+    //若是详情页之间的跳转，借助redirect避免组件复用
+    const isToDetailPage = to.meta.isDetailPage,
+        isFromDetailPage = from.meta.isDetailPage
+
+    return isToDetailPage !== undefined && isToDetailPage === isFromDetailPage
+}
+
 //初始化菜单和权限
-function initMenu() {
+function initMenuAndResource() {
     if (!store.state.resource.hasInitRoutes) {
         return store.dispatch('resource/init', store.state.user)
     }
@@ -91,12 +93,11 @@ function initMenu() {
 
 //判断是否需要打开iframe
 function iframeControl(to, from) {
-    const isRefresh = to.path === '/redirect' + from.path
+    let iframe = to.meta.iframe
-    let iframe = to.meta && to.meta.iframe
     const operate = iframe ? 'open' : 'close'
-
+    if (to.path === `/redirect${from.path}`) {
-    if (isRefresh) iframe = from.meta && from.meta.iframe
+        iframe = from.meta.iframe
-
+    }
     return store.dispatch(`iframe/${operate}`, iframe)
 }
 

vue/src/router/util.js

@@ -4,9 +4,16 @@ import {title} from "@/config"
 import PageSkeleton from "@/components/Skeleton/PageSkeleton"
 
 //拼接页面标题
-export function getPageTitle(route) {
+export function setPageTitle(route) {
-    const pageTitle = route.meta && route.meta.title
+    const pageTitle = route.meta.title
-    return pageTitle ? `${pageTitle} - ${title}` : title
+    document.title= pageTitle ? `${pageTitle} - ${title}` : title
+}
+
+//确定路由的标题
+export function specifyRouteTitle(to, from) {
+    if (typeof to.meta.dynamicTitle === 'function') {
+        to.meta.title = to.meta.dynamicTitle(to, from)
+    }
 }
 
 //将给定的白名单url转换为正则

vue/src/views/app/redirect.vue

@@ -7,7 +7,7 @@
                 const {name, params} = JSON.parse(query.params)
                 this.$router.replace({name, params})
             }
-            else this.$router.replace({path: '/' + params.path, query})
+            else this.$router.replace({path: `/${params.path}`, query})
         },
 
         render: h => h()