vue-router进阶-2-路由原信息
//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中至少要注入两项,state 和 mutation。 state就是根据你项目的需求,自己定义一个数据结构。
const state = {
currentPage: ,
user: '',
change: ,
page,
ctrl,
meta,
configs,
datas
} export default new Vuex.Store({
state,
mutations,
})
vue-router进阶-2-路由原信息的更多相关文章
- vue Router——进阶篇
vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- router.beforeEach、路由元信息、导航守卫与函数式编程
一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- HBase 笔记2
Hadoop 服务启动顺序: zookeeper ->journalnode->namenode -> zkfc -> datanode HBase Master WEB控制台 ...
- 【Checkio Exercise】Three Point Circle
计算三角形外接圆的函数: Three Point Circle If we want to build new silos, then we need to make more formal and ...
- Mysql数据库优化之SQL及索引优化
1. 如何发现有问题的SQL? 使用mysql慢查询日志对有效率问题的Sql进行监视 (1) show variables like 'slow_query_log'; 查看慢查询日志是否 ...
- 51Nod 1085 背包问题 (01背包)
在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. 收起 输入 第1行,2个 ...
- 清理Visual Studio 2017的项目历史记录或手工修改Visual Studio 2017的注册表设置
Visual Studio 2017的"最近的文件列表"和"项目列表"总是删了之后重启电脑又出现(PS:这期间没有打开过项目,更没打开过VS). 一怒之下,按照 ...
- hiho一下 第168周
题目1 : 扩展二进制数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 我们都知道二进制数的每一位可以是0或1.有一天小Hi突发奇想:如果允许使用数字2会发生什么事情? ...
- P2053 [SCOI2007]修车(费用流)
P2053 [SCOI2007]修车 顾客平均等待的最小时间$=$等待总时间$/n$ 考虑只有1个技术人员时,$n$辆车等待总时间 $A_1+(A_1+A_2)+(A_1+A_2+A_3)+...+\ ...
- JNI与底层调用
交叉编译 在一个平台下,编译出另一个平台能够执行的二进制的代码 平台:windows,mac os,linux 处理器:x86,arm,mips 交叉编译的原理 源代码->编译->链接-& ...
- 王之泰201771010131《面向对象程序设计(java)》第八周学习总结
第一部分:理论知识学习部分 第六章 第六章知识点主要分为1. 接口 2. lambda表达式 3. 内部类 4. 代理 1. 接口 1) Java为了克服单继承的缺点,Java使用了接口, 一个类可以 ...
- luoguP1281 书的复制 DP,贪心
luoguP1281 书的复制 链接 https://www.luogu.org/problemnew/show/P1281 思路 简单dp,输出方案. 很明显dp记录路径对不对? 恭喜你死了. 求出 ...