Vue-router 进阶
Vue-router 进阶
路由 元信息
在定义路由的时候,可以定义 meta 字段
children: [
{
path: 'bar',
component: Bar,
// a meta field 元信息
meta: { requiresAuth: true } 这里路由提示需要认证
}
]
然后, 如何使用这个meta呢?
路由中匹配到的路径都被称为路由记录,每个路由记录都会被存在 $route.metched 中
所以,可以通过访问$route.metched 遍历数组,获得meta值。
在 路由守卫的参数中也有对应的meta值
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// 检查登录装太
// 未登录,就跳到登录页
if (!auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
基于路由的动画效果
获取数据
一般是两种:
1,在路由跳转后组件渲染时获取数据,可以loading,每个视图可以用自己的loading
2,可以在 beforeRouteEnter beforeRouteUpdate 中获取数据,和路由同步或者获取不到数据后不next().
滚动行为
切换路由路径,对应不同页面,同时vue-router还可以保留滚动的位置信息,但仅限于支持pushState的浏览器。
scrollBehavior (to, from, savedPosition) {
1,返回跳转到的指定的页面的位置,锚点记录selector
if (to.hash) {
return{
selector:to.hash
};
}
2, 返回保留的位置
if (savedPosition) {
returnsavedPosition;
}
3, 返回置顶,也是 default
return{ x:0, y:0 };
}
异步滚动 (2.8.0新增)
返回一个promise 得出一个预期的位置
scrollBehavior (to, from, savedPosition) {
return new Promise(resolve, reject) {
setTimeout( () => {
resolve({x: 0, y: 0});
}, 2000); // 接收 promise 传值
}
}
原文地址:https://www.cnblogs.com/the-last/p/11391811.html
- 关于索引的使用模式(r3笔记56天)
- 关于oracle中的半连接(r3笔记55天)
- 关于正则表达式第三篇(r3笔记第52天)
- 关于正则表达式第四篇(r3笔记第53天)
- 外部表简单总结(r3笔记第51天)
- 通过shell脚本监控sql执行频率(r3笔记第50天)
- 和Null有关的函数(r3笔记第48天)
- 关于查询转换的一些简单分析(二) (r3笔记第68天)
- 跨网络拷贝文件的简单实践(r3笔记第67天)
- 关于enq: TX - allocate ITL entry的问题分析(r3笔记第66天)
- Tensorflow学习:使用Tensorflow搭建深层网络分类器
- 关于interval partitioning(r3笔记65天)
- Spark Tips4: Kafka的Consumer Group及其在Spark Streaming中的“异动”(更新)
- 关于数据库中的一些name(r3笔记第64天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于thinkphp5的报错 "mkdir() Permission denied"的解决
- 不同步节点在线使用Remix开发以太坊Dapp及solidity学习入门 ( 一 ):智能合约HelloWorld
- solidity编写eth智能合约之contract 创建合约(二)
- solidity modifier函数修改器 智能合约开发知识浅学(三)
- solidity struct 结构体创建与使用浅学 (四)
- solidity bytes 智能合约开发知识浅学(五点一)bytes基本概念
- Web程序员的Mysql进阶序二之sql多条数据插入、多条数据更新、多表同时查询
- Web程序员的Mysql进阶序三之sql多表数据删除、子查询、联合查询
- nginx 修改配置文件使之支持pathinfo,且隐藏index.php
- 微信jssdk开发,PHP,必要步骤
- 微信JSSDK分享页面自定义当前链接最简单示例
- (一)python3 只需3小时带你轻松入门—— 编程尝试
- (二)python3 只需3小时带你轻松入门——基本变量
- (三)python3 只需3小时带你轻松入门—— 变量的简单运算
- (四)python3 只需3小时带你轻松入门—— 流程控制