(6)vue路由守卫案例

案例说明：当访问路径有问题重定向到指定页面，也就是404页面跳转功能的实现

第一步首先你要有一个404页面

very_sorry.png (980×211)，下载这个图片

将下载的图片放在src/assets,命名为404.png

创建页面404.vue

<script setup>

import router from "@/router/index.js";

</script>



<template>

  <div style="text-align: center">

    <img alt="Vue logo" src="../assets/404.png" style="width: 50%">

  </div>

  <div style="text-align: center">

    <el-button type="primary" @click="router.push('/')">返回首页</el-button>

  </div>



</template>

配置路由

在src/route/index.js下添加一条路由

{
    path:'/404',name: 'notFind', component: () => import('../views/404.vue')
}

访问404

运行项目访问/404

第二步使用重定向

非常简单，一行代码即可实现

 { path: '/:pathMatch(.*)*', redirect: '/404' },

匹配所有路径重定向到/404

注意这个路由必须放在最后，当访问上面全部路由后没找到才会执行到

{ path: '/:pathMatch(.*)*', name: 'notFind', redirect: '/404' },这个路由

所以它的优先级最低

运行项目访问/23r23试试

如果重定向到/404说明你成功了