承接上文Vue实战——vueRouter路由的添加与配置，继续我们的实战之旅，本项目Gitee地址：
https://gitee.com/vuejslearn/news-list.git
从本项目中的导航配置文件中，我们发现了：
{ path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') }
形如上面的代码，这是什么意思呢？不难理解，path，就是导航的url路径，name则为导航的名称，component则是导航到哪个目标组件。比如项目的初始目录是'/'，则默认导航到了Home这个组件里，也就是项目的默认首页。当我们通过：
Home | AboutnewAbout
中点击Home时，就会通过路由的配置，将Home组件显示到的标记处。
可，问题是，假设我们需要在路由跳转前对用户身份做判断，常见的比如身份验证——必须在登录状态下才能进行跳转，那该怎么做呢？这里我们需要使用全局前置守卫：
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // ...})
我们在项目中路由配置文件里加入：
router.beforeEach((to, from, next) => { console.log('全局前置守卫') console.log(to) console.log(from) console.log(next) debugger // 如果注释下面的方法，则导航不会正确跳转过去 next()})
启动项目，打开F12
我们发现，在路由跳转前，执行了我们这个代码，F8放行，则正常跳到首页。我们就可以在这里进行必要的身份验证了。
同样的，有了前置，还有后置：
router.afterEach((to, from) => { console.log('全局后置钩子') console.log(to) console.log(from) debugger})
这些配置，都是全局生效，也就是说所有的跳转都会走这两个方法。那有没有只对某个跳转进行拦截呢？有的——路由独享守卫：
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ]})
形如以上，我们在我们的news-list项目中，路由配置文件的newAbout模块加入以下代码：
beforeEnter: (to, from, next) => { console.log('newAbout独享的前置守卫') debugger next() },
意思就是当跳转newAbout这个导航时，才进行前置守卫。我们重启项目，进行跳转验证，发现只有当点击newAbout时，才走这个拦截。
到此，大家会发现，所谓的守卫，是什么呢？就是拦截器，它和后端服务的拦截器是一种思路，在执行逻辑前、后。进行统一拦截过滤。
当然除了全局、路由，还有组件级别的拦截，接下来我们创建一个新的组件：newAbout.vue
这是一个新的组件
然后修改路由配置，将newAbout的组件改成新建的组件
component: () => import(/* webpackChunkName: "about" */ '../views/newAbout.vue')
重启项目，点击newAbout：
组件已经挂载上了。接下来，假设我们在跳转到newAbout组件后，需要从后台获取数据，那我们该怎么做呢？修改newAbout组件：
这是一个新的组件,从后台获取的数据={{value}}
我们添加了一个getData的方法，模拟从后台获取数据，然后在组件created的时候调用，当我们重启项目后，访问：
页面出现了，模拟的数据。这就是导航跳转后，获取数据的方式之一。
原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文档，喜欢的朋友欢迎关注。