vue-router设置404失败

原文链接：https://blog.csdn.net/xiaojinglyd/article/details/99711063

做一个多页面项目，一般会加一个404页面。

问题

router中设置匹配404规则，但是没有生效

new Router({
	mode: 'history',
	routes: [{
		path: '/',
		name: 'layout',
		component: Layout,
		redirect: '/home',
		children: [{
				path: '/home',
				component: Home,
				name: 'home'
			}]
    }]
  }, {
		path: '*',
		component: 404,
	}]
});

this.$router.push({
	name: 'number111',
});

分析

没有效果可能没设置成这样

{
	path: '*',
	name: '*',
	component: 404,
}

尝试之后，发现没有解决，那应该是使用路由守卫了

Routes.beforeEach((to, from, next) => {
  if (to.matched.length !== 0) {
    next()
  } else {
    next({ path: '/404' })
  }
});

建议

• 不使用路由守卫，建议路由跳转不使用name
• 使用路由守卫处理404