路由组件传参

布尔模式

设置props: true 会利用里面的参数使用route.params的作为组件的属性

{
  // 动态路由
  path: '/argu/:name',
  name: 'argu',
  component: () => import('@/views/argu.vue'),
  props: true
},
// argu.vue
<template>
    <div>
        hello {{name }}
    </div>
</template>
<script>
    export default {
    props: {
    name: {
        type: String,
        default: 'jack006'
      }
    }
  }
<script>

对象模式

props: {
        food: 'banana'
    }

export default {
props: {
    food: {
        type: String,
            default: 'orange'
    }
  }
}

参数模式

props: route => ({
                food: route.query.food
            })
// 组件设置 
props: {
  food: {
        name: String,
        default: 'apple'
     }
},

HTML5 History 模式

const router = new VueRouter({
   //http://localhost:8080/#/
  // 默认hash模式，链接带#号，history不带#,此时没有匹配到链接会指向index.html,且在路由列表**最后**中配置一个任意执行的路径
  mode: 'history',  
  routes
})
// 路由列表最后（组件匹配顺序是从上到下的）
{
path: '*',
component: () => import('@/views/error_404.vue')
}

导航守卫

在路由发生跳转到导航结束这段时间内能做相应逻辑处理（例如： 权限处理，用户登录）

• 前置守卫

  const HAS_LOGIN = true
  // 前置守卫
  router.beforeEach((to,from,next) => {
   if(to.name !== 'login'){
      if(HAS_LOGIN) next()
      else next({name: 'login'})
    }else {
      if (HAS_LOGIN) next({name: 'home'})
      else next()
    }  
  })
  

• 导航守卫

  // 导航被确认之前
  //router.beforeResolve()
  

• 后置后卫

  // 后置钩子
  router.afterEach((to,form,next) => {
    //loging = false
  })
  

• 独享守卫

    {
      path: '/',
      name: 'home',
      alias: '/home_page',
      component: Home,
      props: route => ({
          food: route.query.food
      }),
      // 路由独享守卫
      beforeEnter:((to,form,next) =>{
        if(form.name === 'login') alert("这是从登录也来的")
            else alert('不知道从哪来的')
            next()  //不能少
        })
  },
  

• 组件内守卫

  beforeRouteEnter (to,form,next){
    // this在此无法获取组件实例，但可以在next中获取
    next(vm =>{
        //vm 为当前组件
        console.log(vm)
    })
  },
  beforeRouteLeave (to,form,next) {
    const leave = confirm('您确定要离开吗？')
    if (leave) next()
    else next(false)
  },
  beforeRouteUpdate (to,form,next){
      //
  }
  

路由导航解析过程

/**
 * 导航解析流程
 * 1、在导航被触发
 * 2、在失活的组件（即将离开的页面组件）里面条用离开守卫 beforeRouteLeave
 * 3、调用全局的前置守卫 beforeEach
 * 4、在重用的组件里调用 beforeRouteUpdate
  * 5、调用路由的独享守卫 beforeEnter
 * 6、异步解析路由组件
 * 7、在被激活的组件（即将进入的页面组件）里调用 beforeRouteEnter（this还不能用）
 * 8、调用全局的解析守卫 beforeResolve
 * 9、导航被确认
 * 10、调用全局的后置守卫 afterEach
 * 11、触发DOM更新
 * 12、用创建好的实例调用 beforeRouteEnter 守卫里传给next的回调函数
 */

路由元信息

// 路由列表加入
meta: {
        title: '关于'
    }
// 前置守卫中设置
router.beforeEach((to,from,next) => {
  to.meta  && setTitle(to.meta.title)
}
export const setTitle = (title) => {
    window.document.title = title || 'admin'
}

过渡效果

// index.js中
<transition-group name="router">
    <router-view key="default"/>
    <router-view key="email" name="email"/>
    <router-view key="tel" name="tel"/>
</transition-group>

<style lang="less">
 .router-enter{
   opacity: 0;
}
.router-enter-active{
    transition: opacity is ease;
}
.router-enter-to{
    opacity: 1;
}
.router-leave{
    opacity: 1;
}
.router-leave-active{
    transition: opacity is ease;
}
.router-leave-to{
    opacity: 0;
}
</style>