導航守衛導航完成之前獲取資料鉤子函式

阿新 • • 發佈：2020-10-22

<!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>