vueRouter3.x

1.vueRouter是什么

vue.js中的路由管理器

2.两个内置组件

router-link、router-view

3.active-class是哪个组件上的属性

route-link

4.路由重定向，路由重命名

routes:[{{ path: '/home', redirect: '/index' }}]

5.动态路由

router.addRoute

6.路由传值

1.在路由配置的path中加上:id,在组件中使用params.id获取到值

2.query

3.params

7.$router 和 $route 的区别

• $router是VueRouter的实例,使用$router.push方法导航到不同的URL。返回上一个历史history用$router.to(-1)
• $route为当前router跳转对象。可以获取当前路由的name,path,query,parmas等数据

8.路由钩子函数(7)

全局守卫、独享守卫、组件内守卫

9.路由的mode值

• hash：地址栏 URL 中的 # 符号,使用变更hash不会刷新页面的特性来变更路由, 做到页面无刷新
• history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法
• abstract：abstract 模式没有使用浏览器api，可以放到node环境或者桌面应用中

10.路由懒加载

import

webpack提供的require.ensure()

11.路由跳转和location.href跳转的区别

路由跳转：组件之间的跳转，不会刷新页面

location.href：页面之间的跳转，会刷新页面

13.路由跳转

组件导航：使用两个内置组件

编程式导航：router.push 、router.replace、 router.go

14.路由导航解析流程

• 导航被触发。
• 在失活的组件里调用 beforeRouteLeave 守卫。
• 调用全局的 beforeEach 守卫。
• 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
• 在路由配置里调用 beforeEnter。
• 解析异步路由组件。
• 在被激活的组件里调用 beforeRouteEnter。
• 调用全局的 beforeResolve 守卫 (2.5+)。
• 导航被确认。
• 调用全局的 afterEach 钩子。
• 触发 DOM 更新。
• 调用 beforeRouteEnter守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入