详解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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
基于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
PHP自动生成月历代码
2006/10/09 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
10个简化PHP开发的工具
2014/12/25 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
小程序实现上下切换位置
2020/11/16 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python微信公众号之关键词自动回复
2018/06/15 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python使用建议技巧分享(三)
2020/08/18 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
加薪通知
2015/04/25 职场文书
孟佩杰观后感
2015/06/17 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python