vue動的に追加されたルートページの更新時に失効する原因と解決策

問題の説明
昨日、vueバックグランド管理システムの権限ページをルーティングの機能に動的に追加すると、問題が発生しました。動的に追加されたルートページは、ページリフレッシュ時に404の状況が発生しました。
シーン
バックグラウンド管理システムの権限制御は、フロントエンドページで権限コードを定義することにより、コードをバックグラウンドの学生に保存してテーブルに配置し、バックグラウンドから戻ってきた権限コードリストとフロントページに配置されたコードメニューリストをフィルタリングしてマッチングします。コードが等しいページは、権限があるページです。また、router.addRoute（）を通じて経路に動的に追加されます。アクセスできるルートがあります。そうでなければ、権限がないことをヒントにします。
固定ルートは最初からnew Routerにおいて登録ページのloginなどです。
インターフェース

フロントエンドメニュー定義

vuexの中の方法


発生した問題
ログイン後、vuexのメソッドを呼び出して、アクセス権限コードを取得し、動的にフィルタ権限を持つルーティングページの操作を完了した後、router.addRoute（）を介して、権限メニューをルートに追加し、動的に追加されたルートページに進み、ページを更新する404。
原因分析
ページ更新時に、ルーティングが再初期化され、動的に追加されたルーティングはこの時点では存在しなくなり、一部の固定ルート（例えば登録ページ）がまだ残っているため、404の状況が発生した。
ソリューション
VUEX storeに保存されているデータはページ更新時に空になります。
ルートのグローバルナビゲーションrouter.beforeEachで判断して、VUEXに保存されているリストの値によってページが更新されているかどうかを判断します。0でないと初めて登録して、登録後にルートに合う方法があります。問題がないです。list.lengthが0であれば、ページを更新するために、ルーティング・マッチングを再実行し、ダイナミック・ルーティングを新たに追加すれば良い。
コードroute/index.jsのナビゲーションガードに論理判定を追加することを実現します。
――router.js――――――――

const constantRoutes = [
 {
  path: '/',
  redirect: '/login'
 },
 {
  path: '/login',
  name: 'login',
  meta: {
   auth: false
  },
  component: () => import('@/views/login')
 },
 {
  path: '/layout',
  name: 'layout',
  meta: {
   auth: true
  },
  component: () => import('@/views/layout/index'),
  children: [
   {
    path: '/index',
    name: 'index',
    component: () => import('@/views/home')
   }
  ]
 },
 {
  path: '*',
  component: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 new VueRouter({
  routes: constantRoutes
 })
export function resetRouter() {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher // reset router
}
const router = createRouter()
 
//                 ，        404  
const reSetPermissionList = to => {
 return new Promise((resolve, reject) => {
  if (to.path !== '/login' && store.state.permission.permissionList.length === 0) {
   store
    .dispatch('permission/getPermissionList')
    .then(() => {
     resolve('permCode')
    })
    .catch(error => {
     resolve('permCode')
    })
  } else {
   resolve()
  }
 })
}
router.beforeEach((to, from, next) => {
  
 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)) {//              
  next({
   path: '/login',
   query: {
    redirect: to.fullPath
   }
  })
 } else { //         
  if (to.path === '/login') {
   next({ path: '/index' })
  } else {
    reSetPermissionList(to).then(data => {
     data === 'permCode' ? next({ path: to.path, query: to.query }) : next()
    })
  }
 }
 
})

締め括りをつける
主にグローバルナビゲーションでVUEX中のデータが存在するかどうかを判断して、ページが更新されているかを判断します。そうであれば、もう一度アクセス権のルートマッチングを行う方法です。
以上がVue動的に追加されたルートページの更新時に失効した原因と解決策の詳細です。Vueルートページの更新に関する資料は他の関連記事に注目してください。