vue中路由meta的作用
meta的定义:meta简单来说就是路由元信息 也就是每个路由身上携带的信息。meta的作用:有利于我们处理seo的东西,我们在html中加入meta标签,就是有利于处理seo的东西,搜索引擎方法一:直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了例如:{{path: '/actile',name: 'Ac
·
meta的定义:meta简单来说就是路由元信息 也就是每个路由身上携带的信息。
meta的作用:vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可
用法一:登录校验
router.beforeEach((to, from ,next) => {
const token = store.getters.userInfo
if(to.matched.some(record => record.meta.requireAuth)){
next()//如果路由中有meta的requireAuth,且为true,就不进行登录验证,否则进行登录验证
}else{
if(token){
next()
}else{
if(to.path==="/login"){
next()
}else{
next({path:'/login'})
}
}
}
return
})
用法二:通过路由元信息实现不同路由展示不同布局页面
<template>
<el-container :class="['app uf-col']">
<template v-if="$route.meta.fullScreen">
<router-view></router-view>
</template>
<template v-else-if="$route.meta.homePages">
<Nav></Nav>
<router-view></router-view>
</template>
</el-container>
</template>
更多推荐
已为社区贡献5条内容
所有评论(0)