【点击查看】低成本上班族靠谱副业好项目 | 拼多多无货源创业7天起店爆单玩法

【点击查看】逆林创业记 | 拼多多电商店铺虚拟类项目新玩法（附完整词表&检测工具）

【点击查看】逆林创业记 | 小白ai写作一键生成爆文速成课

领300个信息差项目，见公众号【逆林创业记】（添加请备注:网站）

编程式导航

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

 
您访问的网页不存在
 
{{second}}秒返回首页
 


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)
  }
}

例

而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);
})