vue路由的基本使用
1.使用vue-cli构建项目 vue init webpack vue-router
2.我们在src目录下的component下创建page1.vue和page2.vue和notFound.vue
3.修改router文件夹下的index.js文件
4.修改App.vue
这样一个基本的vue路由就实现了
vue动态路由匹配
1.在src/component下创建user.vue
2.修改router下的index.js
3.修改App.vue
vue的嵌套路由
1.创建page1的子路由first.vue和second.vue
2.配置router下的index.js,在page1路由配置中添加子路由
3.在page1.vue中添加标签导航
这样我们的嵌套路由就完成了
vue路由传参
我们再来说说路由的传参
1.使用router-link进行路由导航，传递参数
在父组件page2中，使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航
在子组件method1：使用this.$route.params.title来接收路由参数
路由配置
2.直接调用$router.push 实现携带参数的跳转
在page2父组件中
子组件不变还是使用this.$route.params.title来接收路由配置也不变
3.通过路由属性中的name来确定匹配的路由，通过params来传递参数
在父组件中
子组件中
路由配置
4.使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？
注：params 和 query 都是传递参数的，params不会在url上面出现，并且params参数是路由的一部分，是一定要存在的 query则是我们通常看到的url后面的跟在？后面的显示参数
父组件中
子组件中
路由配置
最后我们再说下路由守卫，路由守卫类似于拦截器，在进入路由之前进行拦截检查，再决定是否放行
路由守卫
vue-router一共给我们提供了三大类钩子函数来实现路由守卫：
1、全局钩子函数（beforeEach、afterEach)
2、路由独享的钩子函数（beforeEnter）
3、组件内钩子函数（beforeRouterEnter、beforeRouterUpdate、beforeRouterLeave）
1.全局钩子函数：
beforeEach：
beforeEach一共接收三个参数，分别是to、from、next；to：即将进入的路由对象；from：正要离开的路由对象；next：路由的控制参数；
next一共有四种调用方式：
next()：一切正常调用这个方法进入下一个钩子；
next(false)：取消路由导航，这时的url显示的是正要离开的路由地址；
next('/login')：当前路由被终止，进入一个新的路由导航（路由地址可以自由指定）
next(error)：路由导航终止并且错误会被传递到router.onError()注册过的回调中；
我们一般是用全局钩子来控制权限，像什么进页面没有登录就跳登录页，需要用户达到什么级别才能访问当前页面都是属于页面权限控制，都是可以通过beforeEach钩子函数来实现
AfterEach：
AfterEach和beforeEach一样都是属于全局守卫钩子，都是在main.js中进行调用；其中AfterEach比beforeEach少一个next参数；
to：即将要进入的路由对象；
from：正要离开的路由对象；
afterEach()我们一般用来重置页面滚动条位置：
假如我们有一个页面很长，滚动后其中的某个位置后跳转，这时新的页面的滚动条位置就会在上一个页面停留的位置；这个时候我们就可以利用afterEach进行重置
我们来实现一下：
由于未登录，路由跳转到了login
2.路由独享的钩子函数：
beforeEneter：
路由独享顾名思义就是指定的路由才有这些钩子函数，通常这类路由独享的钩子函数我们是在路由配置文件中进行配置，只能设置改变前的钩子，不能设置改变后的钩子
我们给路由page1添加一个钩子
这是我们由于设置了next(false)，page1路由不能放行
3.组件内的钩子函数：
beforeRouteEnter(to,from,next)：
在路由进入前调用，因为此时的vue实例还没有创建，所以beforeEnter是唯一一个不能使用this的钩子函数；
to:即将要进入的路由对象；
from：正要离开的路由对象；
next：路由控制参数
beforeRouteUpdate(to,from,next):
在路由发生修改的时候进行调用，比如我们上一篇文章讲到的动态路由传参，这种情况我们的beforeRouteUpdate也是会被调用的；
to:即将要进入的路由对象；
from：正要离开的路由对象；
next：路由控制参数；
beforeRouteLeave(to,from,next):
在路由离开该组件时调用；
to:即将要进入的路由对象；
from：正要离开的路由对象；
next：路由控制参数
我们在method1组件中试一下：
自此vue-router的使用我们就讲完了
demo代码：https://github.com/langeyu/-vue-cli-vue-router.git
