vue-router的路由

路由和组件是有区别的:组件一般是在同一个页面的不同模块,但是路由是直接切换到另一个页面,之前的页面销毁。

App.vue中的router-view会渲染顶级路由匹配到的组件。组件内部嵌套的router-view会渲染子路由匹配到的组件。

当路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。
定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。
总体来讲vue里面提供了三大类钩子
1.全局守卫
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用
router.afterEach 全局后置钩子 进入路由之后
2.路由守卫
router.beforeEnter进入路由之前
3.组件守卫
beforeRouteEnter 进入路由前
beforeRouteUpdate 路由复用同一个组件时
beforeRouteLeave 离开当前路由时

完整的导航解析流程

触发进入其他路由。
调用要离开路由的组件守卫beforeRouteLeave
调用局前置守卫:beforeEach
在重用的组件里调用 beforeRouteUpdate
调用路由独享守卫 beforeEnter。
解析异步路由组件。
在将要进入的路由组件中调用beforeRouteEnter
调用全局解析守卫 beforeResolve
导航被确认。
调用全局后置钩子的 afterEach 钩子。
触发DOM更新(mounted)。
执行beforeRouteEnter 守卫中传给 next 的回调函数
总结:除了router.afterEach是两个参数to,from以外,其他都是三个参数,to,from,next

 

转载于:https://www.cnblogs.com/zhouyideboke/p/11187721.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mac上的更新node npm

查看当前node版本 $ node -v v8.9.4 清除node.js的cache(不确定有没有必要) $ sudo npm cache clean -f Password: npm WARN using --force I sure hope you know what you are doing. 安装工具n ,这个工具是专门用来管理node.js版本的 $ sudo npm install -g …

电源芯片选择DC/DC还是LDO?《转》

这个取决于你的应用场合。比如用在升压场合,当然只能用DC/DC,因为LDO是压降型,不能升压。另外看下各自的主要特点: DC/DC:效率高,噪声大; LDO:噪声低,静态电流小; 所以如果是用在压降…

Atom React或前端插件推荐

分享一些Atom个人在用的插件,喜欢请点赞 1. color-picker 取色工具 2. pigments 编辑器中直接查看代码所代表的颜色,工具虽小但是很实用。 3. minimap 仿sublime text的缩略代码查看,想找的地方一目了然。 4. highlight-selected 选择某段代码自动高…

Nike Kyrie 1 Performance Review

Traction – There has been many varying opinions on the Kyrie 1’s traction, and I don’t think any of them have been wrong. I’d say under the right conditions, the traction is excellent. I’ve experienced nothing but great traction out of them, but all o…

Tapable.plugin is deprecated. Use new API on `.hooks` instead

问题描述 在使用extract-text-webpack-plugin给webpack打包时出现报错 Tapable.plugin is deprecated. Use new API on .hooks instead 1 问题原因 extract-text-webpack-plugin目前版本不支持webpack4。 解决方案 使用extract-text-webpack-plugin的最新的beta版 npm inst…

第二周进度总结

本周主要在完成假期作业,学习的时间大部分花在代码上。完成了3个代码的编译。第一个是害死人不偿命的(3n1)猜想。第二个是成绩排名(输出成绩最高和成绩最低学生的姓名和学号)。第三个是换个格式来输出任一个不超过 3 位的正整数。这三个题目中…

webpack.optimize.CommonsChunkPulgin is not a constructor???请看CommonsChunkPlugin VS SplitChunksPlugin

webpack团队人员卧薪尝胆五个多月的时间终于带来的webpack4,个人觉得webpack4带来的最大优化便是对于懒加载块拆分的优化,删除了CommonsChunkPlugin,新增了优化后的SplitChunksPlugin,那么CommonsChunkPlugin的痛点在哪&#xff1…

多重表(广义表)

在深入浅出数据结构系列前面的文章中&#xff0c;我们一直在讨论“线性表”&#xff0c;其形式如下&#xff1a; 由a1,a2,a3,……a(n-1)个元素组成的序列&#xff0c;其中每一个元素ai(0<i<n)都是一个“原子”&#xff0c;“原子”的意思就是说元素本身是一个个体&#x…

简单教你React父子组件间平级组件间传值

国庆充电特辑&#xff1a; 堵车堵死&#xff0c;废话不多说直接上菜。 1.父组件对子组件传值 利用props属性传值 class Component extends React.Component {constructor (props) {super(props);}render() {return (<div><h1>I am {this.props.name}</h1>…

Requests库的主要方法:requests.request为requests.get和requests.post两个的汇总,只是需要传方法...

1. requests.request(method,url,**kwargs&#xff09; method&#xff1a;请求方式&#xff0c;对应get/put/post等七种&#xff1a;拟获取页面的url链接&#xff1a;控制访问参数&#xff0c;共13个method&#xff1a;请求方式rrequests.request(GET,url,**kwargs) r reques…

jQuery插件开发教程

jQuery插件开发精品教程&#xff0c;让你的jQuery提升一个台阶 要说jQuery 最成功的地方&#xff0c;我认为是它的可扩展性吸引了众多开发者为其开发插件&#xff0c;从而建立起了一个生态系统。这好比大公司们争相做平台一样&#xff0c;得平台者得天下。苹果&#xff0c;微软…

Html Email 邮件html页编写指南

前言 写过邮件的html的童学应该都知道&#xff0c;邮件的html一般都用table来布局&#xff0c;为什么呢&#xff1f;原因是大多数的邮件客户端&#xff08;比如Outlook和Gmail&#xff09;&#xff0c;会过滤HTML设置&#xff0c;让邮件面目全非。 经过多次的邮件编写实践及度…

vue父组件异步获取动态数据传递给子组件获取不到值

原理&#xff1a; 在父组件中使用axios获取异步数据传给子组件&#xff0c;但是发现子组件在渲染的时候并没有数据&#xff0c;在created里面打印也是空的&#xff0c;结果发现一开始子组件绑定的数据是空的&#xff0c;在请求数据没有返回数据时&#xff0c;子组件就已经加载了…

MAC 下配置JavaEE开发环境

1、安装jdk&#xff0c;官网下载 路径&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html 选择合适的版本下载即可。 2、配置Java环境变量 &#xff08;1&#xff09;commandspace 输入termimal 打开终端 &#xff08;2&#xff09;在终端中输…

微服务深入浅出(7)-- 网关路由Zuul

Zuul用于构建边界服务&#xff0c;致力于动态路由&#xff0c;过滤&#xff0c;监控&#xff0c;弹性伸缩和安全等方向。 1、ZuulRibbonEureka结合&#xff0c;可以实现智能路由和负载均衡 2、网关将所有服务的API接口统一聚合统一暴露 3、网关统一爆率接口后&#xff0c;可以做…

判断JavaScript对象为null或者属性为空

首先说下null与undefined区别&#xff1a; 对已声明但未初始化的和未声明的变量执行typeof&#xff0c;都返回"undefined"。 null表示一个空对象指针&#xff0c;typeof操作会返回"object"。 一般不显式的把变量的值设置为undefined&#xff0c;但null相…

font face如何导入自定义字体

首先&#xff0c;浏览器支持什么字体取决于用户系统里安装了什么字体&#xff0c;比如CSS中这么写&#xff1a; font-family:"微软雅黑","黑体","宋体"; 那么浏览器会尝试按照从左到右的顺序依次应用&#xff0c;假设用户电脑上没有安装微软雅黑…

Python中_,__,__xx__方法区别

_xx 单下划线开头 Python中没有真正的私有属性或方法,可以在你想声明为私有的方法和属性前加上单下划线,以提示该属性和方法不应在外部调用.如果真的调用了也不会出错,但不符合规范. 方法就是以单下划线开头命名定义了&#xff0c;这种定义不会被*导入&#xff08;from module …

利用@media screen实现网页布局的自适应

利用media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加media screen属性,根据浏览器宽度判断并输出不同的长宽值 1280分辨率以上&#xff08;大于1200px&#xff09; media screen and (min-width:1200px){#p…

C# webkit内核 网页填表

比如我要操作的是下面的input 用到的方法是 调用如下&#xff1a; webkit.StringByEvaluatingJavaScriptFromString("document.getElementsByClassName(login_i_con_li_ipt name)[0].valueThis is a Demo."); 类似这种div在webkit中好像是无法通过常规方法模拟的 这时…