5

Vue3 404页面（NotFond）配置方案

 3 years ago
source link: https://www.joynop.com/p/369.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Vue3 404页面（NotFond）配置方案

全部捕获/ 404未找到路线

常规参数只会匹配网址片段之间的字符，并用分隔/。如果我们想匹配任何东西，我们可以使用自定义参数正则表达式，方法是在参数后面紧随括号内添加正则表达式：

const routes = [
  // will match everything and put it under `$route.params.pathMatch`
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // will match anything starting with `/user-` and put it under `$route.params.afterUser`
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]
JavaScript

捕获所有路由 ( /* ) 时，现在必须使用带有自定义正则表达式的参数进行定义：/:catchAll(.*)

  { path: '/:catchAll(.*)*', name: 'NotFound', component: NotFound },
JavaScript

在这种特定情况下，我们在括号之间使用自定义正则表达式，并将pathMatch参数标记为可选的可重复的。这是为了让我们可以根据需要直接导航到路线，方法是将拆分path为一个数组：

this.$router.push({
  name: 'NotFound',
  params: { pathMatch: this.$route.path.split('/') },
})
JavaScript

打赏: 微信收款二维码微信, 支付宝收款二维码支付宝

标签: Router, vue3


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK