vue redirect(路由重定向) 与 404（*）冲突问题

绝地灬酷狼 2022-09-16 15:21 262阅读 0赞

# vue redirect(路由重定向) 与 404（\*）冲突问题 #

--------------------

# 问题 #

进入页面时做重定向处理，同时做了页面404处理,但是在处理时候发现没有重定向，直接跳转了404页面。代码如下：

{ 
      path: "/",
      name: "main",
      redirect: "/home",
      component: () => import(/* webpackChunkName: "main" */ "@/pages/main"),
      children: [{  
         path: "/home",
         name: "home",
         component: () => import(/* webpackChunkName: "home" */ "@/pages/home"),
         meta: {  title: "首页" }
      },
      { 
         path: "*",
         name: "error404",
         component: () =>
           import(/* webpackChunkName: "error404" */ "@/pages/errorPage/404"),
         meta: {  title: "页面不存在" }
      }],
    }

# 解决 #

上面的路由在【/】的时候在children里面没有匹配到路有，就进入了404页面，所以redirect重定向失效了。

## 方法一：在children里面做页面重定向，代码如下： ##

{ 
    	path: "/",
    	name: "main",
    	// redirect: "/home",
    	component: () => import(/* webpackChunkName: "main" */ "@/pages/main"),
    	children: [{ 
    		path: "/",
    		name: "mian",
    		redirect: "/home" //在这里做重定向，这时候就不会出现冲突
    	},
    	{ 
    		path: "/home",
    		name: "home",
    		component: () => import(/* webpackChunkName: "home" */ "@/pages/home"),
    		meta: {  title: "首页" }
    	},
    	{ 
    		path: "*",
    		name: "error404",
    		component: () =>
    		import(/* webpackChunkName: "error404" */ "@/pages/errorPage/404"),
    		meta: {  title: "页面不存在" }
    	}]
    }

## 方法二：将404页面放到 【/】路由外面 这样就不会出现冲突，代码如下： ##

{ 
    	path: "/",
    	name: "main",
    	redirect: "/home",
    	component: () => import(/* webpackChunkName: "main" */ "@/pages/main"),
    	children: [{ 
    		path: "/home",
    		name: "home",
    		component: () => import(/* webpackChunkName: "home" */ "@/pages/home"),
    		meta: {  title: "首页" }
    	}]
    },
    { 
    	path: "*",
    	name: "error404",
    	component: () =>
    	import(/* webpackChunkName: "error404" */ "@/pages/errorPage/404"),
    	meta: {  title: "页面不存在" }
    }