编程式导航和重定向

编程式导航

    编程式导航就是无需点击事件来自动跳转路由页面,如我们访问一个不存在的路由并显示出404页面,并于3秒后自动跳回首页,这就需要用到编程式导航。

<template>
 <h1>您访问的网页不存在</h1>
 <p>{{second}}秒返回首页</p>
 
</template>

<script>
export default {
  data () {
    return {
        second:3
    }
  },
  mounted(){
    let time = setInterval(()=>{
        this.second--
        if(this.second == 0){
            clearInterval(time)
            this.$router.push('/')//编程时导航 无需点击自动跳转页面
            this.$router.replace('/')//没有历史记录
            this.$router.go(-2)//回退
        }
    },3000)
  }
}
</script>

例

而this.$router.push('/')和this.$router.go(-2)是有历史回退记录的
this.$router.replace('/')没有历史回退记录,

重定向

    就是我访问你路由的时候给你跳转到另一个路由中去,如用户不小心访问到了你的admin管理员路由,那么就给重新定向到首页路由中去

redirect重定向

 {
    path: '/article/:id',
    name: 'ArticleId',
    redirect:'/',//重定向到首页
    component:()=>import('../views/ArticleId.vue')
  },

全局导航守卫

就是你在路由中跳转时处理的一些api
router.beforeEach((to,from)=>{

})

router.beforeEach((to,from)=>{
  console.log(from);
  console.log(to);
})

如我们从首页跳转到关于页面

路由

假设我们在开发过程中有一个关于路由还没开发完,不想让任何人去访问这个页面,那么就可以写成这样的格式

router.beforeEach((to,from)=>{
  if(to.path =='/about'){
    return false;
  }
})