Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

const 定数ルート = [
 {
  パス： '/'、
  リダイレクト: '/login'
 },
 {
  パス: '/login',
  名前: 'ログイン',
  メタ: {
   認証: 偽
  },
  コンポーネント: () => import('@/views/login')
 },
 {
  パス: '/layout',
  名前: 'レイアウト',
  メタ: {
   認証: 有効
  },
  コンポーネント: () => import('@/views/layout/index'),
  子供たち： [
   {
    パス: '/index',
    名前: 'インデックス',
    コンポーネント: () => import('@/views/home')
   }
  ]
 },
 {
  パス： '*'、
  コンポーネント: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 新しいVueRouter({
  ルート: 定数ルート
 })
エクスポート関数resetRouter() {
 定数 newRouter = createRouter()
 router.matcher = newRouter.matcher // ルーターをリセットする
}
定数ルーター = createRouter()
 
// ページが更新された後に動的ルーティングの 404 問題を防ぐために、権限ページの動的ルーティングをリセットします。const reSetPermissionList = to => {
 新しい Promise を返します ((resolve, reject) => {
  to.path !== '/login' && store.state.permission.permissionList.length === 0 の場合 {
   店
    .dispatch('permission/getPermissionList')
    .then(() => {
     解決('permCode')
    })
    .catch(エラー => {
     解決('permCode')
    })
  } それ以外 {
   解決する（）
  }
 })
}
router.beforeEach((to, from, next) => {
  
 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)){//ログインしていますか? ログインページへ進みます next({
   パス: '/login',
   クエリ: {
    リダイレクト: to.fullPath
   }
  })
 } else { //ログインしたユーザーがページに入る if (to.path === '/login') {
   次へ({ パス: '/index' })
  } それ以外 {
    reSetPermissionList(to).then(データ => {
     データ === 'permCode' ? next({ パス: to.path, クエリ: to.query }): next()
    })
  }
 }
 
})