1、beforeRouteEnter(to, from, next):在渲染该组件的对应路由被验证前调用,也就是刚进入路由之前调用。
2、beforeRouteUpdate(to, from, next):在当前路由改变,但是该组件被复用时调用,也就是当路由参数改变时调用。
3、beforeRouteLeave(to, from, next):在导航离开渲染该组件的对应路由时调用,也就是切换路由时调用。
4、created():在组件创建完成后调用。
<div id="app"></div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript" src="./vue-router.js"></script> <script type="text/javascript" src="./axios.js"></script> <script type="text/javascript"> Vue.use(VueRouter) var User = { data(){ return{ user:'', error:null, timer:null, num:0, msg:'', // 输入框中输入的内容 msg1:'', // 页面中展示的数据 confir:true } }, template:` <div> <div>{{num}}</div> <input type="text" v-model='msg' /> <p>{{msg1}}</p> <button @click='save'>保存</button> <div v-if="error" class="error"> {{error}} </div> <div class="user" v-if="user"> <h2>{{user}}</h2> </div> </div> `, methods:{ setDatas(user){ this.user = user; }, setError(err){ this.err = err; }, save(){ this.msg1 = this.msg; this.msg = ''; this.confir = true; } }, created(){ // 定时器 this.timer = setInterval(()=>{ console.log(this.num); this.num += 1; }, 1000) }, beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ! // 因为当守卫执行时,组件实例还没被创建! console.log('beforeRouteEnter路由被验证前调用'); console.log(to); axios.get(`http://127.0.0.1:8888/user/${to.params.id}`) .then(res=>{ // console.log(this); next(vm=>vm.setDatas(res.data)); }) .catch(err=>{ next(vm=>vm.setError(err)) }); }, beforeRouteUpdate(to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候, // 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this` console.log('beforeRouteUpdate前路由改变,但是该组件被复用时调用'); console.log(to); this.user = null; axios.get(`http://127.0.0.1:8888/user/${to.params.id}`) .then(res=>{ this.setDatas(res.data); next(); }) .catch(err=>{ this.setError(err.data); next(); }); }, beforeRouteLeave(to, from, next) { // 在导航离开渲染该组件的对应路由时调用 // 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this` console.log('beforeRouteLeave离开渲染该组件的对应路由时调用'); clearInterval(this.timer); console.log('你离开了'); if(this.confir == true && this.msg){ // 证明用户输入了内容 需要提示用户保存重要信息 this.confir = confirm('请求保存重要信息'); //用户点击了取消按钮返回值为false next(false); }else if(this.confir == false){ alert('请保存信息后退出'); next(false); }else{ next(); } }, } // 我是测试组件 var Test = { template:` <div>我是测试组件</div> ` } // 路由的配置 var router = new VueRouter({ routes:[ { path:'/test', name:'test', component: Test }, { path:'/user/:id', name:'user', component: User } ] }); // 入口组件 var App = { template:` <div> <router-link :to="{name:'test'}">测试</router-link> <router-link :to="{name:'user', params:{id:1}}">我是用户1</router-link> <router-link :to="{name:'user', params:{id:2}}">我是用户2</router-link> <router-view></router-view> </div> ` }; Vue.prototype.$axios = axios; new Vue({ el:'#app', template:'<App/>', data(){ return{ } }, components:{ App }, router }); </script>
原文地址:http://www.cnblogs.com/sfwu/p/16910481.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性