详解vue-router 路由元信息
发布时间:2020-12-17 02:48:01 所属栏目:百科 来源:网络整理
导读:一、背景 之前写前端都是后端返回界面,跳转神马的完全不用自己操心,但是这次用 vue 写的前端,第一次前后端分离,后端只给前端提供数据接口,一开始还想着是后端控制界面的渲染神马的,但是后面一想,路由神马的都是前端控制的,后端的手伸不过来啊,于是
一、背景之前写前端都是后端返回界面,跳转神马的完全不用自己操心,但是这次用 vue 写的前端,第一次前后端分离,后端只给前端提供数据接口,一开始还想着是后端控制界面的渲染神马的,但是后面一想,路由神马的都是前端控制的,后端的手伸不过来啊,于是乎就一直在逛 vue-router 的官网,想着应该会有相关的东西,然后发现了路由元信息,起初怎么也没看懂是什么意思,后面慢慢琢磨明白了,记录一下 二、代码分析官网路由元信息 (1)路由定义 这里的 meta 字段就是路由元信息字段,requiresAuth 是自己起的字段名称,用来标记这个路由信息是否需要检测,true 表示要检测,false 表示不需要检测(这个名称随便起,比如我自己的就起的 requiresId,或者你懒得想,就直接 a,b 这么起,当然,还是比较建议起个有意义的名称) (2)js 代码 h(App),created () {
this.redrct()
},methods: {
redrct () {
router.beforeEach((to,from,next) => {
if (to.matched.some(record => record.meta.requiresId)) { //这里meta字段的名称要与上面route里面保持一致
// this route requires Id,check if logged in
// if not,redirect to login page.
if (!this.loggedIn()) { // 自己的判断条件
next({
path: '/',// 重定向后的路由
query: { redirect: to.fullPath } // 登录成功之后可以根据query中的内容跳转回原来的路由(页面)
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
},loggedIn () {
var id = sessionStorage.getItem('userId')
if (id === null) { // 未登录
return false
}
return true // 别忘了这句啊,之前忘写了,调了好半天呢
}
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- Swift Review总结一:从 Swift Style 开始
- routing – react-native-router-flux,如何获取当前场景密钥
- for xml path 应用
- XmlFormat()总是比htmlEditFormat()好吗?
- ruby-on-rails – 如何在Rails middware中找到当前的抽象路
- c# – 确定待定的终结器源
- ruby-on-rails – render_views在rspec中做什么?
- [转]使用 Ajax 调用 SOAP Web 服务,第 1 部分: 构建 Web 服
- 在Ruby中使用辅助方法的首选方法是什么?
- 详解C++中的指针、数组指针与函数指针