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演示,了解一下。希望能给大家一个参考,也希望大家多多支持。