导航完成之前获取

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>