//meta字段,一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路有对象)的 $route.matched 数组。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
//遍历 $route.matched 来访问路由记录中的 meta 字段
//全局导航守卫中检查元字段
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
Store中至少要注入两项,statemutation。

state就是根据你项目的需求,自己定义一个数据结构。
const state = {
currentPage: ,
user: '',
change: ,
page,
ctrl,
meta,
configs,
datas
} export default new Vuex.Store({
state,
mutations,
})

vue-router进阶-2-路由原信息的更多相关文章

  1. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  2. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  3. router.beforeEach、路由元信息、导航守卫与函数式编程

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  4. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  5. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  6. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

  7. vue进阶:vue-router之导航守卫、路由元信息、路由懒加载

    1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...

  8. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  9. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. PHP----------php-fpm进程数的一些相关配置

    1.其中pm.max_children如何配置:pm.max_children 数量的多少根据机器内存确定,基本上一个进程需要30M的内存,假设起100个进程,那么就是3000M,3G内存. 2.pm ...

  2. easy UI的密码长度以及重复输入验证

    自己些项目的时候找的时候也找了一会,所以存下来下次用的时候可以直接用了. 话不多说,直接上代码 <tr> <td>密码:</td> <td><in ...

  3. 缓存淘汰算法---LRU转

    1. LRU1.1. 原理 LRU(Least recently used,最近最少使用)算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. ...

  4. 设计模式理解(九)结构型——外观(Facade)

    等了好久,终于想起来开写了,这次写的是外观模式,记得大学时弄课程设计,外观模式搞得我比较混乱,因为单词不认识,后来觉得有点蛋疼,感觉是一坨混乱的东西然后加个壳再弄几个外部调用的接口而已.个人认为,Fa ...

  5. Learning-Python【31】:操作系统基础知识

    什么是操作系统 计算机系统由硬件和软件两部分组成.操作系统(OS,Operating System)是配置在计算机硬件上的第一层软件,是对硬件系统的首次扩充.它在计算机系统中占据了特别重要的地位:而其 ...

  6. 命令行找不到genstrings问题tip

    问题:初次使用命令行genstrings,提示使用的是命令行工具而非xcode,无法直接使用genstrings. 解决方案:命令行输入sudo xcode-select --switch /Appl ...

  7. Pandas 基础(5) - 处理缺失的数据

    首先, 读入一个 csv 文件: import pandas as pd df = pd.read_csv('/Users/rachel/Sites/pandas/py/pandas/5_handli ...

  8. 组合,多态与多态性,封装以及property装饰器介绍

    一:组合: 什么是组合:组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象. 为何要用组合:通过为某一个对象添加属性(属性的值是另外一个类的对象)的方式,可以间接地将两个类关联/整合/组合 ...

  9. PHP冒泡排序-手写

    <?php $a = [1,3,5,2,9,6]; for ($i = 0 ;$i < count($a) ;$i++) { for ($j = $i + 1;$j < count( ...

  10. python中使用configparser库,实现配置文件的读取

    背景: 在写接口自动化框架,配置数据库连接时,测试环境和UAT环境的连接信息不一致,这时可以将连接信息写到conf或者cfg配置文件中 python环境请自行准备. python代码直接封装成类,方便 ...