vue-router路由元信息解惑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zjscy666/article/details/74115285

在看vue-router的时候,相信很多初学者都有一定的困惑,而文档上虽然给了代码,但是很多初学者可能会出现理解困难,今天就让小编来为大家讨论下vue-router路由元信息这个模块!

官方文档上说,定义路由的时候要配置meta字段,然后官方给了案例,之后要求我们访问这个meta字段,从而做些处理!大家看小编这篇文章的时候,可以对照bue-router官方文档!官网上的例子是遍历整个路由模块,然后检查哪个路由下面有meta这个属性,如果检测到有meta属性,就进行一些处理!

下面我们来拆解官网上的案例,其实主要看这几句,第一句meta: {requiresAuth: true},在路由/foo/bar下设置了meta这个对象,然后我们看这句, if (to.matched.some(record => record.meta.requiresAuth) ),如果对这类写法不熟悉,大家可以去看看es6的箭头函数,这句话就是返回遍历的某个路由对象,我们定义为为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测它的meta对象是不是有requiresAuth这个属性,且为true,如果满足上述条件,就确定了是这个/foo/bar路由。案例中写了this route requires auth, check if logged in ,说明如果auth信息是必须的,检验是否登录,也就是在这个路由下,如果检测到auth这个用户名,那么进行下一步操作!案例下面就有了判断,if (!auth.loggedIn()),通过自己封装的检验方法auth.loggedIn(),检验用户是否登录,从而决定渲染下一步操作!

总结,vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可!


猜你喜欢

转载自blog.csdn.net/zjscy666/article/details/74115285