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