zoukankan      html  css  js  c++  java
  • 前端知识扫盲VUE知识篇二(vue-roture知识)

    目录

    1、vue-router有哪几种导航钩子( 导航守卫 )?

    2、完整的 vue-router 导航解析流程

    3、vue-roture两种模式

    4、vue-router的动态路由匹配以及使用

    5、vue-router如何响应 路由参数 的变化?

    6、vue-router的几种参数传递

    7、vue-router的几种实例方法

    8、vue-router如何定义嵌套路由

    9、vue-router实现路由懒加载( 动态加载路由 )

    10、<router-link></router-link>组件及其属性

    1、vue-router有哪几种导航钩子( 导航守卫 )?

      分三种导航钩子,全局钩子,路由独享钩子、组件内钩子;

      全局钩子有:beforeEach导航前置钩子,beforeResolve 全局解析钩子,afterEach 全局后置钩子

      路由独享钩子:beforeEnter

      组件内钩子:beforeRouteEnter 进入路由前,beforeRouteUpdate (2.2) 路由复用同一个组件时,beforeRouteLeave 离开当前路由时

      所以有的钩子有三个参数:to将要进入的的路由对象,form将要离开的路由对象(this.$route对象),next进入下一步的回调。必须调用否则步执行下一步,导致页面空白。next可传参数false,取消这次路由跳转。afterEach没有next参数

    2、完整的解析流程

      触发路由

      调用离开组件的组件离开路由钩子beforeRouteLeave

      调用全局前置路由钩子beforeEach

      重组件调用重用钩子beforeRouteUpdate

      调用路由独享钩子beforeEnter

      解析按需加载的路由组件 

      调用组件内路由钩子beforeRouteEnter

      调用全局的 beforeResolve

      导航被确认

      调用全局后置钩子afterEach 

      DOM更新

      使用创建好的实例调用beforeRouteEnter的next回调

    3、vue-router的两种模式

      hash模式:通过#hash值来跳转页面

      history模式:这种模式就是正常的页面访问路径

      他们两在选型方面的区别就是history更美观,而hash模式带了#号不好看

      使用上的区别history的路径是一个正常的请求路径,每次跳转都会向服务器发送一个请求,所以需要在服务端配置把所有路由默认跳转到首页。否则会出现404的情况。

      因为hash值改变是不会向服务器发送请求的,所以不会出现404的情况。

    4、vue-router的动态路由的配置以及使用

      在路由里使用“:”配置即可,一个路由可以配置多个动态值,且所有动态路由的值会被设置到$route.params里面去。

    5、动态路由如何响应路由参数的变化

      动态路由他需要渲染的是相同的组件,只是数据有变化。所以VUE会直接复用原组件,这就意味着组件的生命周期钩子函数不会被调用。

      要想响应他的变化可以使用Watch来监听$route对象的变化达到目的,或者使用路由的组件内钩子函数berforeRouteUpdate( 2.2版本才支持)

    6、vue-router的传参方法

      有3种传参数方法

      a、query属性   查询参数。他会在路由后面可见性的加上search形式的参数值,刷新也不会丢失。一般情况推荐这种方式。

      b、params属性  必须与命名路由一起使用,否则将接收不到此参数。而且与命名路由使用,他刷新页面就会消失。这种方式一般配合动态路由使用。

      c、动态路由形式   动态路由的动态值会存储到params里去。

    7、vue-router的几种实例方法

      beforeEach,beforeResolve,afterEach,go,push

    8、vue-router如何定义嵌套路由

      使用路由配置childern,并且组件内再插入一个<roture-view>组件

    9、vue-router实现路由懒加载( 动态加载路由 )

      在配置路由模版的时候使用import或者vue异步组件方式引入模版即可,只要是异步引入的就行,还有其他方法。

    10、<router-link></router-link>属性详解

      :to  设置跳转路由

      tag  设置渲染标签

      active-class  激活当前页选中效果

  • 相关阅读:
    Maximum Flow Exhaustion of Paths Algorithm
    ubuntu下安装java环境
    visualbox使用(二)
    vxworks一个超级奇怪的错误(parse error before `char')
    February 4th, 2018 Week 6th Sunday
    February 3rd, 2018 Week 5th Saturday
    February 2nd, 2018 Week 5th Friday
    February 1st, 2018 Week 5th Thursday
    January 31st, 2018 Week 05th Wednesday
    January 30th, 2018 Week 05th Tuesday
  • 原文地址:https://www.cnblogs.com/hrw3c/p/12937070.html
Copyright © 2011-2022 走看看