全局消息钩子

承接上述Vue实战——vueRouter路线的添加和配置，继续我们的实战之旅。本项目的接收地址为:

Https://gitee.com/vuejslearn/news-list.git从这个项目的导航配置文件中，我们发现:

{路径:& # 39；/'，姓名:& # 39；首页& # 39；，component: Home }，{ path:& # 39；/关于& # 39；，姓名:& # 39；关于& # 39；，//路由级代码拆分//这会生成一个单独的chunk(关于。[哈希]。js)，当路由被访问时，它被延迟加载。component:()= & gt；导入(/* webpackChunkName:& # 34；关于& # 34；*/ '../views/about . vue & # 39；)}形似上面的代码，这是什么意思？不难理解，path是导航的url路径，name是导航的名称，component是导航到的目标组件。例如，项目的初始目录是& # 39；/'，默认导航到Home组件，这是项目的默认主页。当我们经过时:

& ltdiv id = & # 34导航& # 34；& gt& lt路由器-link to = & # 34；/"& gtHome & lt/router-link & gt；| & lt路由器-link to = & # 34；/关于& # 34；& gt关于& lt/router-link & gt；& lt路由器-link to = & # 34；/new about & # 34；& gtnewAbout & lt/router-link & gt；& lt/div & gt；& lt路由器-视图/>单击“主页”时，主页组件将显示给

但是，问题是，假设我们在路由跳转之前需要判断用户的身份，比如认证——必须登录才能跳转，怎么办？在这里我们需要使用全局前端保护:

const router = new VueRouter({…})router.beforeEach((收件人，发件人，下一个)= & gt{//…})我们补充道:

router.beforeEach((收件人，发件人，下一个)= & gt{ console . log(& # 39；全球前线卫士& # 39；)console . log(to)console . log(from)console . log(next)调试器//如果注释了下面的方法，导航将无法正确跳转到下一个()})启动项目，F12打开。

我们发现，在路由跳转之前，我们执行了我们的代码，当F8被释放时，我们正常地跳转到了主页。我们可以在这里进行必要的认证。

同样，对于前部和后部:

router.afterEach((to，from)= & gt；{ console . log(& # 39；环球邮报钩& # 39；)console . log(to)console . log(from)debugger })这些配置都是全局有效的，也就是说所有的跳转都会采取这两种方法。只有一跳要拦截吗？是-路由专用保护:

const router = new vue router({ routes:[{ path:& # 39；/foo & # 39；，component: Foo，beforeEnter: (to，from，next)= & gt；{//…}}})如上所述，我们将以下代码添加到新闻列表项目中路由配置文件的newAbout模块中:

beforeEnter:(到，从，下一个)= & gt{ console . log(& # 39；newAbout & # 39)调试器next()}，这意味着当你跳转到新的About导航时，你会有所防备。我们重启了这个项目，执行了跳转验证，发现只有当我们点击newAbout时，我们才执行这个拦截。

至此，你会发现，所谓的守护是什么？就是拦截器，这是一种跟后端服务的拦截器的思维，在执行逻辑之前和之后。统一拦截过滤。

当然，除了全局、路由和组件级拦截，让我们创建一个新组件:newAbout.vue

& lt模板& gt& ltdiv & gt这是一个新组件

component:()= & gt；导入(/* webpackChunkName:& # 34；关于& # 34；*/ '../views/new about . vue & # 39；)重新启动项目，然后单击新建关于:

组件已经安装。接下来，假设我们需要在跳转到newAbout组件后从后台获取数据，我们该怎么做？修改新的关于组件:

& lt模板& gt& ltdiv & gt这是一个新组件，从后台获取的数据= { { value } } </div & gt；& lt/template & gt；& lt脚本& gt导出默认{ name:& # 39；关于& # 39；，data(){ return { value:& # 39；'} }，created () { this.getData() }，方法:{ get data(){ console . log(& # 39；从后台获取数据开始& # 39；)this.value = & # 39aaaa & # 39} } } & lt/script & gt；& ltstyle & gt& lt/style & gt；我们添加了一个getData的方法来模拟从后台获取数据，然后在创建组件时调用它。当我们重启项目时，我们访问了:

页面出现，模拟数据。这是导航跳转后获取数据的方式之一。

原创不容易。鉴于本人水平有限，文章如有错误，请指正。以后我会继续发布vue实战系列的文档，欢迎喜欢的朋友关注。