详解vue-router 路由元信息


Posted in Javascript onSeptember 13, 2017

一、背景

之前写前端都是后端返回界面,跳转神马的完全不用自己操心,但是这次用 vue 写的前端,第一次前后端分离,后端只给前端提供数据接口,一开始还想着是后端控制界面的渲染神马的,但是后面一想,路由神马的都是前端控制的,后端的手伸不过来啊,于是乎就一直在逛 vue-router 的官网,想着应该会有相关的东西,然后发现了路由元信息,起初怎么也没看懂是什么意思,后面慢慢琢磨明白了,记录一下

二、代码分析

官网路由元信息

(1)路由定义

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   meta: { requiresAuth: true }// a meta field
  }
 ]
})

 这里的 meta 字段就是路由元信息字段,requiresAuth 是自己起的字段名称,用来标记这个路由信息是否需要检测,true 表示要检测,false 表示不需要检测(这个名称随便起,比如我自己的就起的 requiresId,或者你懒得想,就直接 a ,b 这么起,当然,还是比较建议起个有意义的名称)

(2)js 代码

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App },
 render: h => 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 // 别忘了这句啊,之前忘写了,调了好半天呢
  }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 #Javascript
VUE实现一个分页组件的示例
Sep 13 #Javascript
jquery 键盘事件的使用方法详解
Sep 13 #jQuery
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
js仿360开机效果
2019/12/26 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
python实现canny边缘检测
2020/09/14 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
市场开发与营销专业求职信
2013/12/31 职场文书
物业工作计划书
2014/01/10 职场文书
党员政治学习材料
2014/05/14 职场文书
体育课外活动总结
2014/07/08 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
个性发展自我评价2015
2015/03/09 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
浅析python中特殊文件和特殊函数
2022/02/24 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python