vue 路由404配置 要获取路由来源
时间: 2024-01-27 09:14:00 浏览: 28
Vue路由的404配置是指当用户访问一个不存在的路由时,需要显示的页面或执行的操作。在Vue中,可以通过配置路由的catch-all路由来实现404页面的展示。
首先,在路由配置文件中,需要添加一个catch-all路由,它会匹配所有未被定义的路由。可以将它放在最后,确保其他路由都不匹配时才会触发。
```javascript
const routes = [
// 其他路由配置
// ...
// catch-all 路由
{ path: '/:catchAll(.*)', component: NotFoundComponent }
]
```
在上述代码中,`:catchAll(.*)`表示匹配所有路径,`NotFoundComponent`是一个自定义的组件,用于展示404页面。
接下来,需要创建一个NotFoundComponent组件,用于展示404页面的内容。在该组件中,可以通过`$route`对象获取当前路由的来源信息。
```javascript
<template>
<div>
<h1>404 Not Found</h1>
<p>当前页面不存在</p>
<p>来源路由:{{ $route.fullPath }}</p>
</div>
</template>
<script>
export default {
mounted() {
console.log('来源路由:', this.$route.fullPath);
}
}
</script>
```
在上述代码中,`$route.fullPath`可以获取当前路由的完整路径,包括参数和查询字符串。
这样配置后,当用户访问一个不存在的路由时,会显示NotFoundComponent组件,并且可以通过`$route.fullPath`获取路由来源信息。