Vue Router 相关

1. 路由传参:

• 编程式的导航 router.push

  this.$router.push("home");
  this.$router.push({ name: 'news', params: { userId: 123 }}) // 传递
  this.$route.params.userId   // 获取
  this.$router.push({path: '/transport/dispatch', query: {paicheNo: obj.paicheNo}}) // 传递
  this.$route.query.paicheNo  // 获取

• 声明式的导航 同样

  <router-link 
       tag="li"  // 渲染为 li标签  默认是 a标签
       :to="{name:'city',query:{id:item.id},params:{cityName:item.name}}">
          {{item.name}}
    </router-link>

• 总结 :
  
• name方式 能够用 query 和 params
• path方式 只能用 query
• 命名路由搭配 params，刷新页面参数会丢失

• 查询参数搭配query，刷新页面数据不会丢失**

2. 关于 hash 和 history 模式的区别

• hash模式url带#号 兼容性好，history模式不带#号 是h5的新API
• history模式的优点
  • 没有# url比较规范 用户看着舒服
  • 咱们用vue 或者 react作的页面 分享到其余的app中 可是app中不容许 url 中带有 #
  • 注意 : history 不怕前进 不怕后退 怕刷新 在访问了二级页面的时候 作刷新操做 就会出现 404 须要后端配置下 apache或者nginx的url重定向 定向到咱们的首页
• history 模式的原理
  • H5新推出的两个神器：pushState与replaceState
  • 做用就是将url替换且不刷新，比如挂羊头卖狗肉，http并无去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404。
  • 如何解决404弊端，这就须要服务器端作点手脚，将不存在的路径请求重定向到入口文件（index.html)
• hash 模式原理
  • window是能够监听到哈希值的变化的（onhashchage事件），这就意味着：当url中的哈希值发生了变化，无需发起http请求，window也能够监听到这种变化，并按需加载前端的代码块
• 最后补充
  • history 模式下 build以后在本地打开index.html是无效的 hash模式则能够打开

3. 命名视图

• 要实现同级展现多个视图 而不是嵌套的关系 就须要命名视图了

  • 一个组件中准备了三个出口

    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>

  • 对于同一个路由 一个视图出口须要一个组件渲染 三个出口就须要三个 下边是具体的配置 注意 components (此时是要加s的)

    const router = new VueRouter({
      routes: [
        {
          path: '/',
          components: {
            default: Foo,
            a: Bar,
            b: Baz
          }
        }
      ]
    })

4. 重定向

• 重定向也是经过routes 配置来完成的 下边的例子是从 /a 重定向到 /b

  const router = new VueRouter({
    routes: [
      {path: '/a', redirect: '/b'}
    ]
  })

• 重定向的目标也能够是一个命名的路由

  const router = new VueRouter({
    routes: [
      {path: '/a', redirect: {name: 'foo'}}
    ]
  })

• 甚至是一个 function 动态的return从定向的目标

  const router = new VueRouter({
    routes: [
      {path: '/a', redirect: to => {
        // 方法接收目标路由做为参数
        // return 重定向饿 字符串路径或路径对象均可以
      }}
    ]
  })

5. 别名

• “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，而后匹配路由为 /b
• “别名”的意思是， 当用户访问 /a时，URL 将会被替换成 /b，而后匹配路由为 /a

const router = new VueRouter({
  routes: [
    {path: '/a', component: Foo, alias: '/b'}
  ]
})

6. 路由守卫

1. 完整的导航解析流程

• 导航被触发了
• 在失活的组件中调用离开守卫 (beforeRouteLeave)
• 调用全局的 beforeEach 守卫
• 在重用的组件中调用 beforeRouterUpdate 守卫(2.2+)
• 在路由配置中调用 beforeEnter
• 解析异步路由组件
• 在被激活的组件里调用 beforeRouterEnter
• 调用全局的 beforeResolve 守卫(2.5+)
• 导航被确认
• 调用全局的 afterEach 钩子
• 触发 DOM 更新

• 用建立好的实例调用 beforeRouterEnter 守卫中传递给 next 的回调函数

  2. 三种守卫(全局的守卫, 路由独享的守卫, 组件内的守卫)的具体配置

• 全局前置守卫

  const router = new VueRouter({....})
  router.beforEach((to, from, next) => {
    // to 即将进入的目标路由对象
    // from 当前导航正要离开的 路由对象
    // next 是一个 function 必需要调用一下 next()  
  })

• 全局解析守卫

  router.beforeResolve((to, from) => {
    // 
  })

• 全局后置守卫

  router.afterEach((to, from) => {
    // 此时没有了 next 函数
  })

• 路由独享的守卫

  const router = new VueRouter({
    routes: [
      {
        path: 'foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
  
        }
      }
    ]
  })

• 组件内的守卫 (定义的位置和组件的生命周期平级)

  const Foo = {
    template: `...`,
  
    beforeRouterEnter (to, from, next) {
      // 在组件的对应路由被 confirm 前调用
      // 不能获取 组件的 this 由于当此守卫执行时 组件实例尚未建立   下方法能够访问组件实例  
      next(vm => {
        // 经过 vm 访问组件的实例 
      })
    },
  
    beforeRouterUpdate (to, from, next) {
      // 当前路由改变 可是该组件被复用时 调用
      // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
      // 能够访问组件的 this
    },
  
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 能够访问组件实例 `this`
    }
  }