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