基于node环境vue v2.6.11脚手架的vue-router v3.5.3页面组件跳转安装使用

   一、路由：它是监听url地址变化，来实现页面组件动态切换的一个vue插件库

   二、安装版本：cnpm i -S vue-router@3

   三、注入首页文件index或者main.js文件:Vue.use(Router)

注册了全局路由组件可以使用：router-view(视图页面展示)、router-link（a链接跳转），还有一个keep-alive

   四、实例化：new Router :配置两种 mode模式、routes配置路由和组件的关联关系

1)mode模式下：hash:路由会一个#标识。history:路由没有#标识 =>这也是区别 用history方式方便点

2)routes它是接收一个数组（里面存放组件的路径对象）,

route（参数配置）: 1.path:是定义路由的地址 一级路由上必须以‘/’开始，后面子二级路由就必须去掉/

2.redirect:是重定向到哪个地址

3.component:指定路由需要加载的组件

4.name：定义一个名字

5.children：是定义子路由的使用

五、全局挂载：router.Router实例

1.matched方法 是数组配置路由对象

2.跳转路由：$router   push(地址字符串)

对象：{path:地址，name:路由名字,query:查询参数，params：动态路由参数}

go:（回去步骤数量）

back:

3.参数：$route :qurey（查询参数），params(动态路由参数使用+id)，meta(定义meta属性来获取固定参数)

4.页面拦截钩子函数，导航卫士

5.指定路由组件挂载位置：在全局挂载组件中使用RouterView占位符组件

六、拦截

常常是在系统中，使用全局拦截实现用户的登录认证用户，页面拦截是用于对访问的提示或者权限

1,路由访问权限拦截：使用页面拦截实现用户编辑离开提示；还可以实现页面权限进入认证

全局拦截：通用拦截 beforeEach

to（将要跳转到理由参数对象）

from（从哪个路由过来的路由参数对象）

next (是否继续执行路由跳转业务) =>一般会对登录验证再跳转，如果没有就直接下一步

2.页面拦截（个性化拦截）两个

boforeRouteEnter(进入页面前的拦截)

beforeLeave(离开前的拦截)  =>这个是否要放弃编辑或者离开的提示时候使用