intelligent route - constant router demo

src/components/TopNav/index.vue

@@ -36,10 +36,8 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import RouterHelpMixin from '@/router/router-help-mixin'
 
 export default {
-  mixins: [RouterHelpMixin],
   data() {
     return {
       // 顶部栏初始数

src/router/index.js

@@ -510,7 +510,8 @@ export const constantRoutes = [{
       component: (resolve) => require(['@/views/career/plan/detail'], resolve),
       name: 'careerDetail',
       meta: {
-        title: '播放视频'
+        title: '播放视频',
+        parentPath: '/new-gaokao/careerVideo' // 用于直接跳转时定位菜单
       }
     },
       {

src/router/router-help-mixin.js

@@ -1,16 +0,0 @@
-export default {
-  methods: {
-    // TODO: 22.8.30 过期了，新的mx-permission已经自动处理了此问题
-    findLeafDescendantPath(routeData, ancestorPath = '') {
-      if (!routeData) return ''
-      if (Array.isArray(routeData)) return this.findLeafDescendantPath(routeData.first())
-      const currentPath = routeData.path.startsWith('/')
-        ? routeData.path
-        : ancestorPath + '/' + routeData.path
-      if (!routeData.children?.length) {
-        return currentPath
-      }
-      return this.findLeafDescendantPath(routeData.children.first(), currentPath)
-    }
-  }
-}

src/store/modules/mx-permission.js

@@ -102,9 +102,10 @@ const permission = {
       const topRoutes = state.topbarRouters
       const ancestors = { fullMatched: false, matches: [] }
       let targetPath = to.path
+      debugger
       traceAncestorRoutesInMenus(topRoutes, targetPath, ancestors)
-      if (!ancestors.fullMatched && to._parentPath) {
-        targetPath = to._parentPath
+      if (!ancestors.fullMatched && to.meta?.parentPath) {
+        targetPath = to.meta.parentPath
         ancestors.matches.length = 0 // clear for re-trace
         traceAncestorRoutesInMenus(topRoutes, targetPath, ancestors)
       }
@@ -147,7 +148,7 @@ const permission = {
       commit('REMOVE_ROUTES')
     },
     AccessDeepMenu({ commit }, route) {
-      const path = route._firstLeafPath || route.path
+      const path = route.meta?.firstLeafPath || route.path
       router.push(path)
     }
   }
@@ -202,8 +203,10 @@ function handleAsyncRouterRedirect(route) {
     if (!firstChild.children?.length) return firstChild.path
     return getFirstLeafPath(firstChild.children, deep)
   }
-  route._firstChildPath = getFirstLeafPath(route.children, false)
-  route._firstLeafPath = getFirstLeafPath(route.children, true)
+  // 属性挂在meta上可以不受匹配方法等因素的影响，最大限度保留设置
+  route.meta = route.meta || {}
+  route.meta.firstChildPath = getFirstLeafPath(route.children, false)
+  route.meta.firstLeafPath = getFirstLeafPath(route.children, true)
 
   route.children?.forEach(child => handleAsyncRouterRedirect(child))
 }
@@ -218,12 +221,12 @@ function handleAsyncRouterComponent(route) {
 }
 
 function handleAsyncRouterLocalReference(route, parent, level) {
-  // 初始化meta.activeMenu
-  if (route.meta && !route.meta?.hasOwnProperty('activeMenu')) route.meta.activeMenu = false
+  // 属性挂在meta上可以不受匹配方法等因素的影响，最大限度保留设置
+  route.meta = route.meta || {}
   // 挂parent可逆向追溯, 不能挂反向引用vuex内部会深拷贝！
-  route._parentPath = parent?.path || ''
+  route.meta.parentPath = parent?.path || ''
   // 挂level可直接定位top/middle/side
-  route._level = level
+  route.meta.level = level
   route.children?.forEach(child => handleAsyncRouterLocalReference(child, route, level + 1))
 }
 

src/views/components/forget-pwd.vue

@@ -1,171 +1,172 @@
-<template>
-  <el-form class="mx-form" ref="form" :model="model" :rules="rules" label-width="80px" label-position="left">
-    <el-form-item prop="mobile" label="手机号码" required>
-      <div class="mx-mobile-send">
-        <el-input v-model="model.mobile" auto-complete="off" placeholder="请输入手机号码">
-        </el-input>
-        <el-button type="primary" class="mx-send" :class="{'inactive':countdown>0}" @click="sendValidateCode">{{countdown>0?`(${countdown})s`:'发送'}}</el-button>
-      </div>
-    </el-form-item>
-    <el-form-item prop="smsCode" label="验证码" required>
-      <el-input v-model="model.smsCode" auto-complete="off" placeholder="请输入验证码">
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="newPassword" label="新密码" required>
-      <el-input type="password" v-model="model.newPassword" auto-complete="new-password" placeholder="请输入新密码">
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="newPwdRepeat" label="确认密码" required>
-      <el-input type="password" v-model="model.newPwdRepeat" auto-complete="new-password" placeholder="请确认新密码">
-      </el-input>
-    </el-form-item>
-    <div class="mx-buttons">
-      <el-button type="primary" @click="submitAction">确认修改</el-button>
-    </div>
-  </el-form>
-</template>
-
-<script>
-import {
-  sendSmsNoValidation,
-  resetCardPassword
-} from "@/api/login";
-
-export default {
-  name: "forgetPassword",
-  data() {
-    return {
-      countdown: 0,
-      model: {
-        mobile: '',
-        smsCode: '',
-        newPassword: '',
-        newPwdRepeat: ''
-      },
-      rules: {
-        mobile: [{
-          required: true,
-          message: '手机号码必填',
-        }, {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: '手机号码格式不正确',
-        }],
-        smsCode: [{
-          required: true,
-          message: '验证码必填',
-        }],
-        newPassword: [{
-          required: true,
-          message: '新密码必填',
-        }, {
-          min: 6,
-          max: 20,
-          message: '新密码长度在6-20个字符之间',
-        }],
-        newPwdRepeat: [{
-          required: true,
-          message: '确认密码必填',
-        }, {
-          validator: (rule, value, callback) => {
-            const valid = value == this.model.newPassword
-            const params = valid ? undefined : new Error(rule.message)
-            callback(params)
-          },
-          message: '确认密码与新密码不一致',
-        }]
-      }
-    }
-  },
-  methods: {
-    sendValidateCode: function () {
-      if (this.countdown > 0) return
-      this.$refs.form.validateField('mobile', (error) => {
-        // validate success
-        if (!error) {
-          sendSmsNoValidation({
-            mobile: this.model.mobile,
-            smsType: 1
-          }).then(res => {
-            // send code success
-            this.msgSuccess('发送成功')
-            this.beginCountDown()
-          })
-        } else {
-          this.msgError(error)
-        }
-      })
-    },
-    submitAction: function () {
-      this.$refs.form.validate(valid => {
-        console.log('submitAction', valid)
-        if (valid) {
-          resetCardPassword(this.model).then(res => {
-            this.msgSuccess('新密码修改成功')
-            this.$emit('resetPwdSuccess')
-          })
-        }
-      })
-    },
-    goBack: function () {
-      uni.navigateBack({
-        delta: 1
-      })
-    },
-    beginCountDown() {
-      this.countdown = 90
-      const timer = setInterval(_ => {
-        if (this.countdown == 0) clearInterval(timer)
-        else this.countdown -= 1
-      }, 1000)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.mx-form {
-  padding: 40px 20px;
-  margin-left: 220px;
-  margin-right: 25px;
-  border-radius: 16px;
-}
-
-.mx-back {
-  font-size: 24px;
-  margin-top: 20px;
-  width: 36px;
-  height: 36px;
-  border-radius: 18px;
-  border: 1px solid #999999;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mx-mobile-send {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.mx-send {
-  width: 60px;
-  margin-left: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.mx-send.inactive {
-  background-color: #aaaaaa;
-  border-color: #aaaaaa;
-}
-
-.mx-buttons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 40px;
-}
-</style>
+<template>
+  <el-form class="mx-form" ref="form" :model="model" :rules="rules" label-width="80px" label-position="left">
+    <el-form-item prop="mobile" label="手机号码" required>
+      <div class="mx-mobile-send">
+        <el-input v-model="model.mobile" auto-complete="off" placeholder="请输入手机号码">
+        </el-input>
+        <el-button type="primary" class="mx-send" :class="{'inactive':countdown>0}" @click="sendValidateCode">
+          {{ countdown > 0 ? `(${countdown})s` : '发送' }}
+        </el-button>
+      </div>
+    </el-form-item>
+    <el-form-item prop="smsCode" label="验证码" required>
+      <el-input v-model="model.smsCode" auto-complete="off" placeholder="请输入验证码">
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="newPassword" label="新密码" required>
+      <el-input type="password" v-model="model.newPassword" auto-complete="new-password" placeholder="请输入新密码">
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="newPwdRepeat" label="确认密码" required>
+      <el-input type="password" v-model="model.newPwdRepeat" auto-complete="new-password" placeholder="请确认新密码">
+      </el-input>
+    </el-form-item>
+    <div class="mx-buttons">
+      <el-button type="primary" @click="submitAction">确认修改</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script>
+import { resetCardPassword, sendSmsNoValidation } from '@/api/login'
+
+export default {
+  name: 'forgetPassword',
+  data() {
+    return {
+      countdown: 0,
+      model: {
+        mobile: '',
+        smsCode: '',
+        newPassword: '',
+        newPwdRepeat: ''
+      },
+      rules: {
+        mobile: [{
+          required: true,
+          message: '手机号码必填'
+        }, {
+          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+          message: '手机号码格式不正确'
+        }],
+        smsCode: [{
+          required: true,
+          message: '验证码必填'
+        }],
+        newPassword: [{
+          required: true,
+          message: '新密码必填'
+        }, {
+          min: 6,
+          max: 20,
+          message: '新密码长度在6-20个字符之间'
+        }],
+        newPwdRepeat: [{
+          required: true,
+          message: '确认密码必填'
+        }, {
+          validator: (rule, value, callback) => {
+            const valid = value == this.model.newPassword
+            const params = valid ? undefined : new Error(rule.message)
+            callback(params)
+          },
+          message: '确认密码与新密码不一致'
+        }]
+      }
+    }
+  },
+  methods: {
+    sendValidateCode: function() {
+      if (this.countdown > 0) return
+      this.$refs.form.validateField('mobile', (error) => {
+        // validate success
+        if (!error) {
+          sendSmsNoValidation({
+            mobile: this.model.mobile,
+            smsType: 1
+          }).then(res => {
+            // send code success
+            this.msgSuccess('发送成功')
+            this.beginCountDown()
+          })
+        } else {
+          this.msgError(error)
+        }
+      })
+    },
+    submitAction: function() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          resetCardPassword(this.model).then(res => {
+            this.msgSuccess('新密码修改成功')
+            this.$emit('resetPwdSuccess')
+          })
+        }
+      })
+    },
+    goBack: function() {
+      uni.navigateBack({
+        delta: 1
+      })
+    },
+    beginCountDown() {
+      this.countdown = 90
+      const timer = setInterval(_ => {
+        if (this.countdown == 0) {
+          clearInterval(timer)
+        } else {
+          this.countdown -= 1
+        }
+      }, 1000)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mx-form {
+  padding: 40px 20px;
+  margin-left: 220px;
+  margin-right: 25px;
+  border-radius: 16px;
+}
+
+.mx-back {
+  font-size: 24px;
+  margin-top: 20px;
+  width: 36px;
+  height: 36px;
+  border-radius: 18px;
+  border: 1px solid #999999;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mx-mobile-send {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mx-send {
+  width: 60px;
+  margin-left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.mx-send.inactive {
+  background-color: #aaaaaa;
+  border-color: #aaaaaa;
+}
+
+.mx-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+}
+</style>

src/views/evaluating/main.vue

@@ -6,36 +6,36 @@
     <div class="fx-column fx-cen-cen pb20">
       <index-card title="在线试卷" class="mt20 index-block">
         <el-row :gutter="20">
-         <el-col :span="8"  v-for="item in onLinePaper">
-          <div class="wrap-item fx-row jc-between ai-center">
-            <div class="left mr30" >
-              <el-image :src="item.img"></el-image>
-            </div>
-            <div>
-              <div class="fx-row ai-center">
-                <el-image  :src="`${$imgBase}index/daoxue/icon_paper.png`"></el-image>
-                <p class="bold">{{item.title}}</p>
+          <el-col :span="8" v-for="item in onLinePaper">
+            <div class="wrap-item fx-row jc-between ai-center">
+              <div class="left mr30">
+                <el-image :src="item.img"></el-image>
               </div>
-              <p class="mt20 mb20" style="color:#CECECE">少儿数字内容</p>
               <div>
-                <el-button type="primary" @click="$router.push(item.path)">立即查询</el-button>
+                <div class="fx-row ai-center">
+                  <el-image :src="`${$imgBase}index/daoxue/icon_paper.png`"></el-image>
+                  <p class="bold">{{ item.title }}</p>
+                </div>
+                <p class="mt20 mb20" style="color:#CECECE">少儿数字内容</p>
+                <div>
+                  <el-button type="primary" @click="$router.push(item.path)">立即查询</el-button>
+                </div>
               </div>
             </div>
-          </div>
-         </el-col>
+          </el-col>
         </el-row>
       </index-card>
       <index-card title="学情分析" class="mt20 index-block">
         <el-row :gutter="20">
-          <el-col :span="8"  v-for="item in idc" @click="$router.push(item.path)">
+          <el-col :span="8" v-for="item in idc" @click="$router.push(item.path)">
             <div class="wrap-item fx-row jc-between ai-center">
-              <div class="left mr30" >
+              <div class="left mr30">
                 <el-image :src="item.img"></el-image>
               </div>
               <div>
                 <div class="fx-row ai-center">
-                  <el-image  :src="`${$imgBase}index/daoxue/icon_paper.png`"></el-image>
-                  <p class="bold">{{item.title}}</p>
+                  <el-image :src="`${$imgBase}index/daoxue/icon_paper.png`"></el-image>
+                  <p class="bold">{{ item.title }}</p>
                 </div>
                 <p class="mt20 mb20" style="color:#CECECE">少儿数字内容</p>
                 <div>
@@ -55,63 +55,64 @@
 <script>
 import IndexCard from '@/views/index/components/index-card.vue'
 import MxImageWrap from '@/views/questioncenter/components/main-card/mx-image-wrap.vue'
-import RouterHelpMixin from '@/router/router-help-mixin'
 import loginCheckMixin from '@/views/components/blocks/index-login-check-mixin'
+
 export default {
   components: { IndexCard, MxImageWrap },
-  mixins: [RouterHelpMixin, loginCheckMixin],
+  mixins: [loginCheckMixin],
   data() {
     return {
       onLinePaper: [
         {
           title: '个人测评',
-          img:`${this.$imgBase}index/daoxue/personal_eval.png`,
+          img: `${this.$imgBase}index/daoxue/personal_eval.png`,
           path: '/daoxue/evaluating/personal/index_3'
         },
         {
           title: '真题测评',
-          img:`${this.$imgBase}index/daoxue/past_eval.png`,
+          img: `${this.$imgBase}index/daoxue/past_eval.png`,
           path: '/daoxue/evaluating/past/index_5'
         },
         {
           title: '学校测评',
-          img:`${this.$imgBase}index/daoxue/school_eval.png`,
+          img: `${this.$imgBase}index/daoxue/school_eval.png`,
           path: '/daoxue/evaluating/school/index_1'
-        },
+        }
       ],
       idc: [
         {
           title: '个人测评',
-          img:`${this.$imgBase}index/daoxue/personal_idc.png`,
+          img: `${this.$imgBase}index/daoxue/personal_idc.png`,
           path: '/daoxue/idc/eval/index_3'
         },
         {
           title: '真题测评',
-          img:`${this.$imgBase}index/daoxue/past_idc.png`,
+          img: `${this.$imgBase}index/daoxue/past_idc.png`,
           path: '/daoxue/idc/eval/index_5'
         },
         {
           title: '学校测评',
-          img:`${this.$imgBase}index/daoxue/school_idc.png`,
+          img: `${this.$imgBase}index/daoxue/school_idc.png`,
           path: '/daoxue/idc/eval/school/index_1'
-        },
+        }
       ]
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>
 <style scoped lang="scss">
 
-.wrap-item{
+.wrap-item {
   background: #F7F8FD;
   border-radius: 4px;
   padding: 20px 30px 0 30px;
 }
-.right{
+
+.right {
   display: flex;
 }
+
 @media screen and (min-width: 1440px) {
   .index-block {
     width: 1350px;

src/views/index/components/index-card-career.vue

@@ -39,15 +39,14 @@ export default {
     getList() {
       career.listNoToken(this.queryParams).then(res => {
         this.list = res['rows']?.map((item, idx) => {
-          // const path = '/career/plan/detail'
-          const path = '/new-gaokao/careerVideo'
+          const path = '/career/plan/detail'
           const nextParams = {
-            // id: item.id,
-            // aliid: item.aliid,
-            // aliIdType: item.aliIdType,
-            // name: item.name,
-            // count: item.plays,
-            // img: item.pictUrl
+            id: item.id,
+            aliid: item.aliid,
+            aliIdType: item.aliIdType,
+            name: item.name,
+            count: item.plays,
+            img: item.pictUrl
           }
           return {
             title: item.name,

src/views/index/login.vue

@@ -31,7 +31,6 @@
 import { mapActions, mapGetters } from 'vuex'
 import forgetPassword from '@/views/components/forget-pwd.vue'
 import CompleteProfile from '@/views/components/complete-profile.vue'
-import RouterHelpMixin from '@/router/router-help-mixin'
 import LoginTopInfo from '@/views/index/components/login-top-info'
 import LoginFormBanner from '@/views/index/components/login-form-banner'
 import LoginTopMenus from '@/views/index/components/login-top-menus'
@@ -45,7 +44,7 @@ import IndexCardCareer from '@/views/index/components/index-card-career'
 import IndexNewsTopWrapper from '@/views/index/components/index-news-top-wrapper'
 
 export default {
-  mixins: [RouterHelpMixin, loginCheckMixin],
+  mixins: [loginCheckMixin],
   components: {
     IndexNewsTopWrapper,
     IndexCardCareer,