Resolving blanks or 404 problems after refreshing the dynamic route of vue3

Preface

I used vue+ant-design-vue to write a dynamic routing page. I can't use 555~~~

I don't know the component version I used before, and I don't know which version is suitable for rollback. I just use "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0", ant-design-vue": "^3.2.5".

This article was read other miscellaneous blogs. It is not easy to write it after you make mistakes.

accomplish

1. First write in the store\file

import { createStore } from 'vuex'

export default createStore({
  state: {
    menu_lists: []  //menu  },
  getters: {
    account(state) {
      return state.menu_lists  // Read menu list    }
  },
  mutations: {
    // Add menu    menuAdd(state, n) {
      if (state.menu_lists.length == 0) {
        state.menu_lists.push(n)
      } else {
        if (state.menu_lists.some(menu =&gt;  != )) {
          state.menu_lists.push(n)
        }
      }
    },
    // Clear the menu    menuDelect(state) {
      state.menu_lists.length = 0
    }
  },
  actions: {
    menu_add({ commit }, data) {
      commit('menuAdd', data)
    },
	// Call to delete menu data when logging out    menu_delect({ commit }) {
      commit('menuDelect')
    }
  },
  modules: {
  }
})

2. Then write

Reason: When refreshing, dynamic routing needs to be remounted to the routing instance, but calling the init method to initialize it cannot solve it, because it belongs to the root of the route and is intercepted by the wildcard to the 404 page before entering. I saved the menu in sessionStorage when I exited the root.

// Created status  created() {
//Read the status information in sessionStorage when the page is loading    if (("store")) {
      this.$(
        (
          {},
          this.$,
          (("store"))
        )
      );
    }
    //Save the information in vuex to sessionStorage when the page is refreshed    ("beforeunload", () =&gt; {
      ("store");
      ("store", (this.$));
    });
 }

3. Read the backend menu file for processing

Modify according to actual

addRouters were removed in vueRouter4, so you can only dynamically add routes through addRouter

import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
    setup() {
    const store = useStore();
    const router = useRouter();
        // Re-encapsulate routing data    function routerPackag(routers) {
      let accessedRouters = ((itemRouter) =&gt; {
        if ( != "Layout") {
          //Processing components----Focus          ("base", {
            path: `/${}`,
            name: ,
            component: () =&gt; import(`@/${}`),
          });
          // Check whether the menu is stored through sessionStorage to avoid repeated additions after refresh          if (!("store")) {
            ("menu_add", itemRouter);
          }
        }
        //Subset of existence        if ( &amp;&amp; ) {
          routerPackag();
        }
        return true;
      });
      return accessedRouters;
    }
   }
)}

4. The main thing is here, you can write it as main or router\index (I wrote it as router\index)

1. Refresh 404: Remove all routes matching the paths to 404 from the static route table, and add them after all dynamic permission routes are added.

2. Refresh the white screen: If you detect and use the added route in the route guard, you need to release the next() after adding the dynamic permission route and change it to next({ path: ${} }) to trigger the new navigation.

import { createRouter, createWebHashHistory } from 'vue-router'
import store from "../store";
import { ref } from 'vue'
const routes = [
  {
    path: '/login',
    name: 'login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =&gt; import( /* webpackChunkName: "Login" */ '../views/ant_login.vue'),
    meta: {
      requireAuth: false,
    },
  },
  {
    path: '/',
    name: 'base',

    component: () =&gt; import( /* webpackChunkName: "Login" */ '../views/ant_base.vue'),
    meta: {
      requireAuth: true,
    },
    children: [
      {
        path: 'index',
        name: 'home',
        redirect: "/map",
        component: () =&gt; import( /* webpackChunkName: "Login" */ '../views/ant_home.vue'),
      }
    ]
  },
  {
    name: "NotFont",
    path: '/:pathMatch(.*)*',
    component: () =&gt; import('../components/'),
    alias: '/404', // Alias    hideMenu: true
  }
]

const router = createRouter({
  history: createWebHashHistory(), //createWebHashHistory is hash mode  // Issue of refreshing the white screen on the page  // Mode value description:  // history:URL is like a normal url, example: http://localhost:8080/home  // hash: the default value will have one more "#", example: http://localhost:8080/#/home //abstract": URL unchanged example: http://localhost:8080  // mode: 'history',
  base: .BASE_URL,
  routes
})
// The following global pre-routing guard can be written in the main fileconst registerRouteFresh = ref(true) // Define the identity and record whether the route is added(async (to, from, next) =&gt; {
  if ( &amp;&amp; .menu_lists.length &gt; 0) {
    ("NotFont")
    await .menu_lists.forEach(e =&gt; {
      // 
      // Processing components----Focus      ("base", {
        path: `/${}`,
        name: ,
        component: () =&gt; import(`@/${}`),
      });
    })
     = false
    // next({ ...to, replace: true })
    next({
      path: `${}`
    })
  } else {
    ([2])
    next()
  }
})

// Global back hook - often used to end animations, etc.(() =&gt; {
  //Not accept next});
export default router

The cache needs to be cleared when logging out

import { useStore } from "vuex";
export default defineComponent({
    setup() {
    const store = useStore()
    function Logout() {
    // Delete vuex menu data    ("menu_delect");
       ()
   }
)}

Troubleshooting process

I'm tired and read those blogs. It's really a trick to get a needle in the ocean. The blogs are too complicated. Some of them write next({ …to, replace: true }) I just want to know how you succeeded. Alas, the order is good but not practical. When you get garbage, you don't want to talk about it. If you don't even have the components used, just paste a piece of code on it. It's so 😫

Summarize

This is the article about the blanks after the refresh of the dynamic route of vue3 or the solution of 404 problems. For more related vue3 refresh of the blanks or 404 content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!