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

目录

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

这篇文章主要介绍了vue访问未定义的路由时重定向404问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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演示，了解一下。