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演示 ，了解一下 。希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
