When we access a route that is not predefined, we jump to a blank page.

This is not a good experience, so we need to configure the access route does not exist to jump to 404 page.

I used vue-Router’s route guard function for this small function.

Add the following code to the TS file in our previous article VUE3 (5) VUE Route VuE-Router4:

/** * Route guard */
router.beforeEach((guard) = > {
  beforeEach.checkAuth(guard, router);
});
 
/** * Route error callback */
router.onError((handler: ErrorHandler) = > {
  console.log("error:", handler);
});
Copy the code

The index.ts file after adding is as follows:

// Import vue-router
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
// Import the route guard method
import beforeEach from "/@/router/beforeEach.ts";
/** * defines the route array */
const routes = [
  {/ / 404 routing
    path: '/ 404'.name: '404'.component: () = >import('/@/views/404.vue')}, {// Back-end management system routing group
    path: "/admin".redirect: "/admin/home".name: "admin".component: () = > import("/@/views/admin.vue"),
    children: [{path: "home".name: "home".meta: { 
              requireAuth: true // Add this field to indicate that login is required to enter this route
            },
            component: () = > import("/@/views/admin/Home.vue")}, {path: "setting".name: "setting".meta: { 
              requireAuth: true // Add this field to indicate that login is required to enter this route
            },
            component: () = > import("/@/views/admin/Setting.vue"},]}, {// Webmaster PC page routing
    path: "/pc".redirect: "/pc/index".name: "pc".component: () = > import("/@/views/pc.vue"),
    children: [{path: "index".name: "Home page".component: () = > import("/@/views/pc/Home.vue"),},]}, {// Webmaster mobile page routing
    path: "/phone".redirect: "/phone/pindex".name: "phone".component: () = > import("/@/views/phone.vue"),
    children: [{path: "pindex".name: "Home".component: () = > import("/@/views/phone/Home.vue"},]},];/** * Create a route */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
 
/** * Route guard */
router.beforeEach((guard) = > {
  beforeEach.checkAuth(guard, router);
});
 
/** * Route error callback */
router.onError((handler: ErrorHandler) = > {
  console.log("error:", handler);
});
 
/** * outputs the object */
export defaultrouter; In routing guard, I call a method encapsulated in beforeEach. Ts:// Import the route guard method
import beforeEach from "/@/router/beforeEach.ts";
beforeEach.checkAuth(guard, router);
 

beforeEach.ts

import { Router } from "vue-router";
export default
{
    /** * Route guard check permission *@param guard 
     * @param router 
     */
    checkAuth(guard: any, router: Router) 
    {
        // Check whether the route exists
        if(! router.hasRoute(guard.name)) {// Layer 3 different 404 routes
            if (guard.fullPath.indexOf("/frame") > =0) 
            {
                router.push("/ 404");
            } 
            else if (guard.fullPath.indexOf("/pages") > =0) 
            {
                router.push("/ 404");
            } 
            else 
            {
                router.push("/ 404");
            }
            return; }}}Copy the code

At this point, the little functionality to access the undefined route jump 404 is complete.

Specific code implementation, please refer to my code vue3 code base: gitee.com/camelliass/…

For good suggestions, please enter your comments below.

Welcome to my blog guanchao.site