<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"></div> <script src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <script type="text/javascript" src="axios.js"></script> <script> 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) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 console.log(to); axios.get(`http://127.0.0.1:8888/user/${to.params.id}`) .then(res=>{ // 此处的vm相当于this next(vm=>vm.setDatas(res.data)); }) .catch(err=>{ next(vm => vm.setError(err)) }) }, beforeRouteUpdate(to, from, next) { console.log(to) // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` this.user = null; this.$axios.get(`http://127.0.0.1:8888/user/${to.params.id}`) .then(res=>{ this.setDatas(res.data); next(); }) .catch(err=>{ this.setError(err); next(); }) }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` 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: '/user/:id', name: 'user', component: User, }, { path: '/test', name: 'test', component: Test }] }); //入口组件 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", data: { }, components: { App }, template: `<App />`, router }); </script> </body> </html>