Vue访问未定义路由时，如何设置自动重定向到404页面？

本文共计1018个文字，预计阅读时间需要5分钟。

目录 + Vue访问未定义的路由时重定向404 + Vue.js 重定向和404等相关问题

1.main.js 文件

2.app.vue 文件

3.home.vue 文件

4.notFound.vue 文件

Vue访问未定义的路由时重定向到404

目录

• vue访问未定义的路由时重定向404
• vue.js 重定向和404等等相关的问题？
• 1. main.js文件
• 2. app.vue文件
• 3. home.vue文件
• 4. notFound.vue文件

vue访问未定义的路由时重定向404

我们在访问未配置的路由时，就会出现一个空白界面，如何重定向404呢，废话不多说，直接来方法。

• 第一种：官方路由守卫。
• 第二种：可以在配置路由中配置 " * " ，对未进行配置的路由进行重定向。

第一种实现方法：使用路由守卫进行。

这种方法也可以实现404跳转，但是具有一定的局限性，如果路由配置的比较多的话，使用不太方便，这里就不介绍路由守卫了，看一下官方文档就很容易理解。

第二种：可以在配置路由中配置 " * " ，对未进行配置的路由进行重定向。

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)   let router = new VueRouter({     routes: [{         path: '/',          redirect: '/home'//重定向     },  {         path: '/home',//配置路径         component: () =>             import ('../components/home'),//按需引入     },{         path: '/404',         component: () =>             import ('../components/404')     },{         path: '*',//匹配未定义的路由         redirect: '/404'//重定向     }] }) export default router

我在其他博客看到有的说需要放在所有配置路由的最后一个，但是我试了一下放在其他位置也是可以重定向到404页面的，可能是我没有发现到bug吧，那就放最后面也是一样的。

vue.js 重定向和404等等相关的问题？

• 1.进入后就是默认 /
• 2.重定向 {path:'/',redirect:'home'}
• 3.重定向 {path:'/',redirect:{name:'home'}}
• 4.所谓404： 指在路由规则的最后的一个规则

- 写上一个很强大的匹配规则

- {path:'*',component:notFoundVue}

相关文件代码：

1. main.js文件

import Vue from 'vue'; import VueRouter from 'vue-router'; //引入主体（页面初始化显示） import App from './components/app.vue'; //一个个link对象 - 分类 import NotFound from './components/notFound.vue'; import Home from './components/home.vue'; //安装插件 Vue.use(VueRouter);//挂载属性 //创建路由对象并配置路由规则 /*let router = new VueRouter({ //routes routes: [ //一个个link对象 {name: 'music',path: '/music_country',component: Music}, {name: 'movie',path: '/movie',component: Movie} ] }); */ //和上述注释代码相同 let router = new VueRouter(); router.addRoutes([ //重定向 /*方法一 * {path:'/',redirect:'/home'}, {path:'/home',component:Home}*/ //方法二：一劳永逸 {path:'/',redirect:{name:'home'}}, {name:'home',path:'/home',component:Home}, //404：最终无法匹配-->404 {path:'*',component:NotFound} ]) //new Vue 启动 :构建vue实例 new Vue({ el: '#app', render: c => c(App), //让vue知道我们的路由规则 router:router,//可以简写为router })

2. app.vue文件

<template> <div> <div class="header"> 头部 - 导航栏目 </div> <!--留坑，非常重要--> <router-view class="main"></router-view> <div class="footer">底部 - 版权信息</div> </div> </template> <script> export default { data(){ return{ } }, methods:{ } } </script> <style scoped> .header,.main,.footer{text-align: center;padding: 10px;} .header{height:70px;background: yellowgreen;} .main{height:300px;background: skyblue;} .footer{height: 100px;background: hotpink;} </style>

3. home.vue文件

<template>     <div>         我是首页     </div> </template> <script>     export default{         data(){             return{                              }         },         methods:{             goback(){                 this.$router.go(-1);             }         }     } </script> <style scoped>     div{font-size: 30px;} </style>

4. notFound.vue文件

<template>   <div>       您要访问的页面出去旅游去了...   </div> </template> <script>     export default {       data(){         return{                   }       },       methods:{                  }     } </script> <style scoped> </style>

以上就是“vue.js 重定向 和 404 等等相关的问题”的简单讲述，可以作为demo演示，了解一下。希望能给大家一个参考，也希望大家多多支持易盾网络。