在uni-app使用三方插件uni-simple-router的时候,自动以meta属性
进行导航守卫拦截
时,设置meta属性失效
在做项目的时候,进行TabBar组件点击跳转需要路由守卫,在进行判断时失效,打印console.log(to.meta.isLogin)
值为undefined
//route,js
//全局路由前置守卫
router.beforeEach((to, from, next) => {
console.log(to.meta.isLogin);//undefined
if (to.meta.isLogin && !store.state.userInfo) {
next({
name: "login",
NAVTYPE: 'push'
})
} else {
next();
}
});
经查官网文档才明白为什么打印不到这个自定义的meta
属性
看原文件
vue.config.js(官网):
//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'aliasPath'] // 没有定义meta属性,需要自己添加
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
原来是在官网快速教程中,vue.config.js
默认配置的uni-read-pages
字段只包括includes: ['path', 'name', 'aliasPath']
,没有meta
这个属性,所以获取不到,我们需要自己手动添加自己需要的字段
添加meta
属性:includes: ['path', 'name', 'meta', 'aliasPath']
添加后的vue.config.js文件如下:
//vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'aliasPath','meta'] //已添加meta属性
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
最后解决成功!!!