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`

  }

}

巴特西