Vue(基础八)_导航守卫（组件内的守卫）

一、前言

主要通过一个例子演示三个钩子的作用：

1、beforeRouteEnter（）

2、beforeRouteUpdate（）

3、beforeRouteLeave

二、主要内容

1、举例说明：下面有三个组件，用户1，用户2公用一个公共组件。

Vue(基础八)_导航守卫（组件内的守卫）

2、beforeRouteEnter（）

（1）详细说明beforeRouteEnter

//在路由改变之前
beforeRouteEnter (to, from, next){

//在渲染该组件的对应路由被confirm前调用
//不能获取当前组件实例this,因为在守卫执行之前，实例还没有被创建
//但是你可以通过传一个回调函数给next来访问组件实例。在导航被确认的时候进行回调，并且把组件实例作为回调方法的参数


}
/*

*/

（2）实现beforeRouteEnter的代码以及演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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 type="text/javascript">
        Vue.use(VueRouter)
        //用户组件
        var User = {
            data(){
                return{
                    user:'',
                    error:null,
                    timer:null,
                    num:0,
                    msg:'',//输入框中输入的内容
                    msg1:'',//页面中展示的数据
                    confirm:true
                }
            },

            template:`<div>
              <div>{{num}}</div>
              <input type="text" v-model='msg'/>
              <p>{{msg1}}</p>
              <button>保存</button>
              <div v-if="error" class = 'error'>{{error}}</div>
              <div class='user' v-if='user'>
              {{user}}
              </div>

            </div>`,
            methods:{
                setDatas(user){
                    this.user = user;
                },
                setError(err){
                    this.error=err;
                }
            },

            beforeRouteEnter(to,from,next){
                //在渲染该组件的对应路由被confirm前调用
                //不能获取组件实例this
                //因为当守卫执行前，组件还没创建，也就是路由切换之前
                //但是你可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调，并将组件实例作为回调方法的参数
                //全局的axios调用
                console.log(to);
                axios.get(`http://127.0.0.1:8888/user/${to.params.id}`)
                .then(res=>{
                    next(vm=>vm.setDatas(res.data));
                })
                .catch(err=>{
                    next(vm => vm.setError(err))
                })
            }
        }
        //测试组件
        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实例
        new Vue({
            el:'#app',
            data:{

            },
            components:{
                App
            },

            template:'<App/>',
            router
        })
    </script>
    
</body>
</html>

beforeRouteEnter