vue-router的几种用法
1.全局路由守卫
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数:
to: Route
: 即将要进入的目标from: Route
: 当前导航正要离开的路由next: Function
: 一定要调用该方法来 resolve 这个钩子。执行效果依赖next
方法的调用参数。next()
: 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false)
: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from
路由对应的地址。next('/')
或者next({ path: '/' })
: 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向next
传递任意位置对象,且允许设置诸如replace: true
、name: 'home'
之类的选项以及任何用在router-link
的to
prop 或router.push
中的选项。next(error)
: (2.4.0+) 如果传入next
的参数是一个Error
实例,则导航会被终止且该错误会被传递给router.onError()
注册过的回
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身:
router.afterEach((to, from) => {yi
二。路由独享守卫
// ...
})
该路由守卫为当前路由进来前的一次校验,如果成功,进入当前路由,不成功则不进行跳转。写法是在需要守卫的路由下面加beforeEdnter.
三.组件内的路由守卫
可以在单个组件中加入路由钩子函数
1. beforeRouteEnter(to,from,next) 路由进入前守卫 这里面不能使用this,因为即将登场的组件还没被创建
2.beforeRouteUpdate(2.2)路由更新
3.beforeRouteLeave 路由离开时
四。动态创建路由
在有些情况下,根据是否有某些权限创建某些路由,这样也是一种路由权限的方式
五.路由组件的缓存
利用keepalive做组件缓存,保留组件状态,提高执行效率.
<keep-alive include='a,b'>
<router-view></router-view>
</keep-alive>
使用incloude或者exclude时要给组件设置name
两个特别的生命周期:actived. deactived, 只有在用keepalive时组件才会多出这两个钩子函数。
vue-router的几种用法的更多相关文章
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 在vue里使用codemirror的两种用法
这是我自己做的一个左边点击对应的标题,右边显示相应代码的一个功能.代码显示这里用的是vue-codemirror插件. 第一种用法: 1.安装:npm install vue-codemirror - ...
- Vue基础之插值表达式的另一种用法!附加变量的监听!
Vue基础之插值表达式的另一种用法!附加变量的监听! 讲这个之前我们先回顾一下原来的用法! <body> <!-- Vue.js的应用可以分为两个重要的组成部分 一个是视图! 另一个 ...
- vue router 几种方式对比 (转载)
<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue躬行记(8)——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- HashMap源码阅读(小白的java进阶)
OverView 构造方法 //构造方法 public HashMap(int initialCapacity, float loadFactor) { if (initialCapacity < ...
- POJ_2533 Longest Ordered Subsequence 【LIS】
一.题目 Longest Ordered Subsequence 二.分析 动态规划里的经典问题.重在DP思维. 如果用最原始的DP思想做,状态转移方程为$DP[i] = max(DP[j] + 1) ...
- Codeforces Round #574 (Div. 2) E. OpenStreetMap 【单调队列】
一.题目 OpenStreetMap 二.分析 对于二维空间找区间最小值,那么一维的很多好用的都无法用了,这里可以用单调队列进行查找. 先固定一个坐标,然后进行一维的单调队列操作,维护一个区间长度为$ ...
- Python中并发、多线程等
1.基本概念 并发和并行的区别: 1)并行,parallel 同时做某些事,可以互不干扰的同一时刻做几件事.(解决并发的一种方法) 高速公路多个车道,车辆都在跑.同一时刻. 2)并发 concurre ...
- python-实现链式栈
7 """ 8 用一个类来实现一个节点 9 """ 10 class Node(object): 11 def __init__(self, ...
- Android中的TaskStack及启动模式
目录 前言 如何观察ActivityStack? 几个问题 关键类介绍 ActivityStack的创建与种类 不同启动模式 launchMode Standard SingleTop SingleT ...
- JSP实验报告
- Kotlin编写Processing程序(使用函数式编程思维和面向接口方式)
写一例Kotlin编写的Processing程序,充分调用函数式编程思维和面向接口的编程思维,供自己和读者参考学习. 初衷 想要实现一行行的文字排版功能,每一行作为一个单位,可制定显示的位置.大小.文 ...
- ASP.NET Core中使用令牌桶限流
在限流时一般会限制每秒或每分钟的请求数,简单点一般会采用计数器算法,这种算法实现相对简单,也很高效,但是无法应对瞬时的突发流量. 比如限流每秒100次请求,绝大多数的时间里都不会超过这个数,但是偶尔某 ...
- Go-15-flag.String 获取系统参数
场景: 启动应用程序时,需要传入系统参数.例如:./start --b /notebook --p true --n 8 package main import ( "fmt" f ...