Vue系列路由篇--进阶篇

1、路由间传参

1.1、使用动态匹配传参

路由配置

{
    path: '/argu/:name',
    name: 'argu',
    component: () => import('@/views/argu.vue'),
    props: true
 }

• props: true 允许路由的 params 作为属性

路由传参

props: {
      name: {
        type: String,
        default: ''
      }
}

这样 路劲接的 name 就可以传入到 组件的 props 中

1.2、使用对象模式

路由配置

直接在props构成对象

{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    props: {
      food: 'banana'
    }
}

1.3、函数模式

路由配置

在 props 构成函数

{
    path: '/',
    alias: '/home_page',
    name: 'Home',
    component: Home,
    props: route => ({        // 相当于 return { food.. }
      food: route.query.food
    })
}

2、路由history模式

2.1、配置 history 模式

在路由配置文件index.js中，设置一个字段 mode: 'history'

const router = new VueRouter({
  mode: 'history',
  routes
})

2.2、使用history路由配置建议

在路由配置路劲的文件router.js，建议 在最后 加上一个匹配所有路劲的配置

{
    path: '*',
    component: () => import('@/views/error_404.vue')
}

• 在最后面加上，才不会影响前面设定的路劲，优先级最低

3、导航守卫

3.1、全局守卫

全局守卫配置

在路由配置文件 index.js 中利用 创建的 router 进行配置

router.beforeEach((to, from, next) => {
  
})

ada

3.2、全局守卫种类

全局前置守卫beforEach

• to：即将要进入的目标路由对象
• from：当前导航正要离开的路由
• next：执行下一步

// 一个简单的判断有没有登录的前置守卫
router.beforeEach((to, from, next) => {
  if(to.name !== 'login') {  // 如果访问的不是登录页面
    if(HAS_LOGINED)  
      next();   // 登录了，下一步，允许访问
    else
      next({name: 'login'})  // 没登陆，跳转到登录页面
  }
})

全局后置钩子afterEach

• 全局后置钩子与全局前置守卫类似，不同的是，这些钩子不会接收 next 函数也不会改变导航本身

  router.afterEach((to, from) => {
    
  })
  

3.3、路由独享的守卫

路由独享的守卫配置

• 使用方法和全局守卫相同
• 不同的是：全局守卫可以作用于全局，路由独享守卫只能作用于被设置守卫的路由

在路由配置路劲的文件 router.js 中，为需要的路由路劲添加 守卫

{
    path: '/',
    alias: '/home_page',
    name: 'Home',
    component: Home,
    props: route => ({
      food: route.query.food
    }),
    beforeEnter: (to, from, next) => {  // 配置局部前置守卫
       // 事件
       next();
    }
}

3.4、组件内的守卫

在组件内直接定义以下路由导航守卫

（1）beforeRouteEnter (刚进入组件)

• 路由时该组件被 confirm 前调用，即组件还没有被渲染时
• **所以无法获取该组件实例 this，因为守卫执行前，组件实例还未被创建 **
• 如果要获取，可以通过next获取该实例对象（vm）

 props: {
    food: {
      type: String,
      default: 'apple'
    }
 },
 beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log(vm)
      console.log(vm.food)
    });
 }

(2) beforeRouteLeave (准备离开组件)

• 通常用于禁止用户还未保存修改突然离开，可以通过next(false)来取消
• 可以访问this

 beforeRouteLeave(to, from, next) {
    const leave = confirm('你明确要离开吗')
    if(leave) 
      next()
    else 
      next(false)
 }

(3) beforeRouteUpdata

• 当路由发生变化，组件复用时调用
• 可以使用this

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和        /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就        会在这个情况下被调用。
    // 可以访问组件实例 `this`
}

4、完整的导航解析流程

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

5、路由源信息

meta

可以在 router.js 给想要给予源信息的组件添加 meta 属性

以下为给切换组件时修改标题

{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      title: '关于'
    }
}

然后全局前置组件组件 beforeEach 中探测探测要进入的组件是否有meta信息

router.beforeEach((to, from, next) => {

  to.meta && setTitle(to.meta.title)  // 有则调用工具类方法修改标题
}

6、页面的切换动画

如果想要页面在切换是有过渡效果，可以设置

以下举例

1. 为想要过渡效果的视图设置 transition-group被包裹

    <transition-group name="router">
         <router-view key="default" />
         <router-view name="tel" key="tel" />
    </transition-group>
   

2. 为 transition-group 设置name属性，用来设置css动画

3. 为每个 view 设置 key值

4. 设置css 动画

   // 页面即将加载
   .router-enter {
     opacity: 0;
   }
   .router-enter-active {
     transition: opacity 1s ease;
   }
   .router-enter-to {
     opacity: 1;
   }
   // 页面离开
   .router-leave {
     opacity: 1;
   }
   .router-leave-active {
     transition: opacity 1s ease;
   }
   .router-leave-to {
     opacity: 0;
   }
   

5. 如果想为某个特定的页面添加特效，也可以采取下面的做法

5.1、将transition-group的name改为动态的

<transition-group :name="routerTransition">

5.2、添加js代码

 export default {
    data() {
      return {
        routerTransition: ''
      }
    },
    watch: {
      '$route' (to) {
        if(to.query && to.query.transitionName){
           this.routerTransition = to.query.transitionName
        }
      }
    }
  }

5.3、这样在url中路劲带有query参数的transitionName=query的组件，就拥有切换动画了