前端知识扫盲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  激活当前页选中效果

原文地址:https://www.cnblogs.com/hrw3c/p/12937070.html