溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue續(xù)集2

發(fā)布時(shí)間：2020-03-31 05:43:52 來(lái)源：網(wǎng)絡(luò) 閱讀：403 作者：DevOperater 欄目：開(kāi)發(fā)技術(shù)

1.前端路由

1.1為什么做單頁(yè)面應(yīng)用

（1）傳統(tǒng)的開(kāi)發(fā)方式 url改變后，立馬發(fā)送請(qǐng)求，響應(yīng)整個(gè)頁(yè)面，有可能資源過(guò)多，傳統(tǒng)開(kāi)發(fā)會(huì)讓前端的頁(yè)面出現(xiàn) “白屏” 用戶體驗(yàn)不好

（2）SPA 單頁(yè)面應(yīng)用 ： 錨點(diǎn)值的改變后，不會(huì)立刻發(fā)送請(qǐng)求，而是在某個(gè)合適的時(shí)機(jī)，發(fā)送ajax請(qǐng)求，局部改變頁(yè)面中的數(shù)據(jù),頁(yè)面不立刻跳轉(zhuǎn)用戶體驗(yàn)好

1.2前端路由的原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--
        SPA : Single Page Application

        前端路由
            1.錨點(diǎn)值 監(jiān)視
            2.ajax獲取動(dòng)態(tài)的數(shù)據(jù)
            3.核心點(diǎn)是錨點(diǎn)值的改變

        前端中 vue|react|angular 都很適合做單頁(yè)面應(yīng)用
     -->

     <a href="#/login">登錄頁(yè)面</a>
     <a href="#/register">注冊(cè)頁(yè)面</a>
     <div id="app">

     </div>

     <script type="text/javascript">

        // onhashchange 事件  url上的錨點(diǎn)數(shù)據(jù)（#/xxx改變）
        var oDiv = document.getElementById('app');

        window.onhashchange = function(){
            console.log(location.hash);
            // 根據(jù)不同的錨點(diǎn)值，對(duì)頁(yè)面不同的切換。
            switch (location.hash) {
                case '#/login':
                    oDiv.innerHTML = '<h3>登錄頁(yè)面</h3>';
                    break;
                case '#/register':
                    oDiv.innerHTML = '<h3>注冊(cè)頁(yè)面</h3>';
                    break;
                default:
                    // statements_def
                    break;
            }
        }
     </script>

</body>
</html>

vue續(xù)集2

1.3vue-router的基本使用

npm init --yes
npm install vue-router --save

vue續(xù)集2
vue續(xù)集2

1.4vue-router集成

它是vue中核心插件
1. 下載vue-router   
   npm init --yes
   npm install vue-router --save
   - 引入vue-router的模塊  默認(rèn)會(huì)拋出一個(gè)VueRouter對(duì)象 另外還有兩個(gè)全局的組件router-link 和router-view

2. Vue.use(VueRouter)

3. 創(chuàng)建路由對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">
        // 2.讓Vue使用該VueRouter創(chuàng)建
        Vue.use(VueRouter);
        var Login = {
            template:`
                <div>登錄頁(yè)面</div>
            `
        };
        var Register = {
            template:`
                <div>注冊(cè)頁(yè)面</div>
            `
        };
        // 3.創(chuàng)建一個(gè)路由對(duì)象
        var router = new VueRouter({
            // 配置路由對(duì)象

            routes:[
                {
                    path:'/login',
                    component:Login
                },
                {
                    path:'/register',
                    component:Register
                }
            ]
        });
        var App = {
            template:`
                <div>
                    <!--router-link默認(rèn)會(huì)被渲染成a標(biāo)簽 to屬性默認(rèn)會(huì)被渲染成href屬性-->
                    <router-link to="/login">登錄頁(yè)面</router-link>
                    <router-link to="/register">注冊(cè)頁(yè)面</router-link>

                    <!--路由組件的出口-->
                    <router-view></router-view>
                </div>
            `
        };
        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>
</body>
</html>

vue續(xù)集2
vue續(xù)集2

1.5命名路由

給當(dāng)前的配置路由信息對(duì)象設(shè)置name:'login'屬性

:to = "{name:'login'}"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">
        // 2.讓Vue使用該VueRouter創(chuàng)建
        Vue.use(VueRouter);
        var Login = {
            template:`
                <div>登錄頁(yè)面</div>
            `
        };
        var Register = {
            template:`
                <div>注冊(cè)頁(yè)面</div>
            `
        };

        // 3.創(chuàng)建一個(gè)路由對(duì)象
        var router = new VueRouter({
            // 配置路由對(duì)象

            routes:[
                {
                    path:'/login',
                    name:'login',
                    component:Login
                },
                {
                    path:'/register',
                    name:'register',
                    component:Register
                }
            ]

        });
        var App = {
            template:`
                <div>
                    <!--router-link默認(rèn)會(huì)被渲染成a標(biāo)簽 to屬性默認(rèn)會(huì)被渲染成href屬性-->
                    <router-link :to="{name:'login'}">登錄頁(yè)面</router-link>
                    <router-link :to="{name:'register'}">注冊(cè)頁(yè)面</router-link>

                    <!--路由組件的出口-->

                    <router-view></router-view>

                </div>
            `
        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>
</body>
</html>

vue續(xù)集2

1.6路由范式----路由參數(shù)之params,query

 (1)xxxx.html#/user/1
        配置路由對(duì)象中  

             {
                path:'/user/:id',
                component:User
             }

             <router-link :to = "{name:'user',params:{id:1}}"></router-link>
   (2)xxxx.html#/user?userId = 1

    {
        path:'/user'
    }
     <router-link :to = "{name:'user',query:{id:1}}"></router-link>

    在組件內(nèi)部通過(guò)this.$route 獲取路由信息對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">

        // 路由范式
           // (1)xxxx.html#/user/1         params
           // (2)xxxx.html#/user?userId = 2    query
        // 2.讓Vue使用該VueRouter創(chuàng)建
        Vue.use(VueRouter);

        var UserParams = {
            template:`
                <div>我是用戶1</div>
            `,
            created(){
                console.log("用戶1this.$route--------",this.$route);
                console.log("用戶1this.$route.params.userId--------",this.$route.params.userId);
                // 發(fā)送ajax請(qǐng)求
                console.log("this.$router--------",this.$router);

            }
        };
        var UserQuery = {
            template:`
                <div>我是用戶2</div>
            `,
            created(){

                console.log("用戶2this.$route--------",this.$route);

                // 發(fā)送ajax請(qǐng)求
                console.log("用戶2this.$router--------",this.$router);

            }
        };

        // 3.創(chuàng)建一個(gè)路由對(duì)象
        var router = new VueRouter({
            // 配置路由對(duì)象

            routes:[
                {
                    // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                    path:'/user/:userId',
                    name:'userp',
                    component:UserParams
                },
                {
                    path:'/user',
                    name:'userq',
                    component:UserQuery
                }
            ]

        });
        var App = {
            template:`
                <div>
                    <!--router-link默認(rèn)會(huì)被渲染成a標(biāo)簽 to屬性默認(rèn)會(huì)被渲染成href屬性-->
                    <router-link :to="{name:'userp',params:{userId:1}}">用戶1</router-link>
                    <router-link :to="{name:'userq',query:{userId:2}}">用戶2</router-link>

                    <!--路由組件的出口-->

                    <router-view></router-view>

                </div>
            `
        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });

    </script>

</body>
</html>

vue續(xù)集2

1.7編程式導(dǎo)航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">

        // 路由范式
           // (1)xxxx.html#/user/1         params
           // (2)xxxx.html#/user?userId = 2    query
        // 2.讓Vue使用該VueRouter創(chuàng)建
        Vue.use(VueRouter);

        var UserParams = {
            template:`
                <div>我是用戶1</div>
            `,
            created(){
                console.log("用戶1this.$route--------",this.$route);
                console.log("用戶1this.$route.params.userId--------",this.$route.params.userId);
                // 發(fā)送ajax請(qǐng)求
                console.log("this.$router--------",this.$router);

            }
        };
        var UserQuery = {
            template:`
                <div>我是用戶2</div>
            `,
            created(){

                console.log("用戶2this.$route--------",this.$route);

                // 發(fā)送ajax請(qǐng)求
                console.log("用戶2this.$router--------",this.$router);

            }
        };

        // 3.創(chuàng)建一個(gè)路由對(duì)象
        var router = new VueRouter({
            // 配置路由對(duì)象

            routes:[
                {
                    // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                    path:'/user/:userId',
                    name:'userp',
                    component:UserParams
                },
                {
                    path:'/user',
                    name:'userq',
                    component:UserQuery
                }
            ]

        });
        var App = {
            template:`
                <div>
                    <button @click = 'paramsHandler'>用戶1</button>
                    <button @click = 'queryHandler'>用戶2</button>
                    <!--路由組件的出口-->

                    <router-view></router-view>

                </div>
            `,
            methods:{
                paramsHandler(){
                    // 編程式導(dǎo)航
                       this.$router.push({ name: 'userp', params: { userId: 123 }})
                },
                queryHandler(){
                      this.$router.push({ name: 'userq', query: { userId: 321 }})
                }
            }
        };

        new Vue({
            el:'#app',
            components:{
                App
            },
            router,
            template:`<App />`
        });
    </script>

</body>
</html>

vue續(xù)集2

1.8嵌套路由

一個(gè)router-view 嵌套另外一個(gè)router-view
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：進(jìn)入首頁(yè)之后 點(diǎn)擊 音樂(lè) /home/music   電影 /home/movie
    Vue.use(VueRouter);

    var Home = {
        template: `
                <div>
                    <br />

                    <router-link to = '/home/music'>音樂(lè)</router-link>
                    <router-link to = '/home/movie'>電影</router-link>

                    <!--子路由組件的出口-->
                    <router-view></router-view>

                </div>
            `
    };

    var Music = {
        template: `
                <div>我是音樂(lè)</div>

            `
    };
    var Movie = {
        template: `
                <div>我是電影</div>

            `
    };

    // 3.創(chuàng)建一個(gè)路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象

        routes: [{

                path: '/',
                // redirect:{name:'home'}
                redirect: '/home'
            },
            {
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/home',
                                //這里不能使用別名，會(huì)報(bào)警告
                // name:'home',
                component: Home,
                children: [
                    // 動(dòng)態(tài)路由匹配 表示你的子組件中的結(jié)構(gòu)是不同的

                    // 當(dāng)訪問(wèn)/home時(shí)，Home組件的出口是不會(huì)渲染任何內(nèi)容，這是因?yàn)闆](méi)有匹配到合適的子路由
                    {
                        path: '',
                        component: Music
                    },
                    {
                        path: 'music',
                        component: Music,

                    },
                    {
                        path: 'movie',
                        component: Movie

                    }

                ]
            }
        ]

    });
    var App = {
        template: `
                <div>
                    <router-link to = "/home">首頁(yè)</router-link>
                    <!--路由組件的出口-->

                    <router-view></router-view>

                </div>
            `
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue續(xù)集2

1.9動(dòng)態(tài)路由匹配

 // 共同的子組件
    var ComDesc = {
        data() {
            return {
                msg: ''
            }
        },
        template: `
            <div>
                    我是{{msg}}
            </div>
        `,
        created() {
            // alert(1);
            this.msg = 'andorid';
        },
        watch: {

// 提醒一下，當(dāng)使用路由參數(shù)時(shí)，例如從 /user/foo 導(dǎo)航到 /user/bar，原來(lái)的組件實(shí)例會(huì)被復(fù)用。
//因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。
            '$route' (to, from) {
                // 對(duì)路由變化作出響應(yīng)...
                console.log("to------------------", to);
                console.log("from------------------", from);

                this.msg = to.params.id;

            }
        }
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：進(jìn)入首頁(yè)之后 點(diǎn)擊 音樂(lè) /home/music   電影 /home/movie
    Vue.use(VueRouter);

    var Timeline = {
        template: `
                <div>
                    <router-link :to = "{name:'comDesc',params:{id:'android'}}">Android</router-link>
                    <router-link :to = "{name:'comDesc',params:{id:'frontend'}}">前端</router-link>

                    <router-view></router-view>

                </div>
            `
    };
    var Pins = {
        template: `
                <div>
                    我是沸點(diǎn)

                </div>
            `
    };

    // 共同的子組件
    var ComDesc = {
        data() {
            return {
                msg: ''
            }
        },
        template: `
            <div>
                    我是{{msg}}
            </div>
        `,
        created() {
            // alert(1);
            this.msg = 'andorid';
        },
        watch: {

// 提醒一下，當(dāng)使用路由參數(shù)時(shí)，例如從 /user/foo 導(dǎo)航到 /user/bar，原來(lái)的組件實(shí)例會(huì)被復(fù)用。
//因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過(guò)，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。
            '$route' (to, from) {
                // 對(duì)路由變化作出響應(yīng)...
                console.log("to------------------", to);
                console.log("from------------------", from);

                this.msg = to.params.id;

            }
        }
    }

    // 3.創(chuàng)建一個(gè)路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        routes: [{
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/timeline',
                component: Timeline,
                children: [{
                        path: "",
                        component: ComDesc
                    },
                    {
                        path: '/timelin/:id',
                        name: 'comDesc',
                        component: ComDesc
                    }
                ]

            },
            {
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/pins',
                name: 'pins',
                component: Pins,

            }

        ]

    });
    var App = {
        template: `
                <div>
                    <router-link to = "/timeline">首頁(yè)</router-link>
                     <router-link to = "/pins">沸點(diǎn)</router-link>
                    <!--路由組件的出口-->

                    <router-view></router-view>

                </div>
            `
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue續(xù)集2

1.10keep-alive

<keep-alive>
                    <router-view></router-view>
</keep-alive>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：進(jìn)入首頁(yè)之后 點(diǎn)擊 音樂(lè) /home/music   電影 /home/movie
    Vue.use(VueRouter);

    var Timeline = {
        template: `
                <div>
                    我是首頁(yè)
                </div>
            `,
        created() {
            console.log('首頁(yè)組件創(chuàng)建了');
        },
        mounted() {
            console.log('首頁(yè)組件DOM加載了')
        },
        destroyed() {
            console.log('首頁(yè)銷毀了');
        }
    };
    var Pins = {
        template: `
                <div>

                <h4 @click = 'clickHandler'> 我是沸點(diǎn)</h4>

                </div>
            `,
        methods: {
            clickHandler(e) {
                e.target.style.color = 'red';
            }
        },
        created() {
            console.log('沸點(diǎn)組件創(chuàng)建了');
        },
        mounted() {
            console.log('沸點(diǎn)組件DOM加載了')
        },
        destroyed() {
            console.log('沸點(diǎn)銷毀了');
        }
    };

    // 3.創(chuàng)建一個(gè)路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象

        routes: [{
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/timeline',
                component: Timeline
            },
            {
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/pins',
                name: 'pins',
                component: Pins,

            }

        ]

    });
    var App = {
        template: `
                <div>
                    <router-link to = "/timeline">首頁(yè)</router-link>
                     <router-link to = "/pins">沸點(diǎn)</router-link>
                    <!--路由組件的出口-->
        <keep-alive>
                    <router-view></router-view>
        </keep-alive>
                </div>
            `
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue續(xù)集2
vue續(xù)集2

1.11路由meta實(shí)現(xiàn)權(quán)限控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app"></div>
    <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
    <!-- 1.引入 vue-router的對(duì)象 -->
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <!-- 全局的VueRouter對(duì)象   vue-router 還給咱們提供了兩個(gè)全局的組件 router-link  router-view-->
    <script type="text/javascript">
    // 嵌套路由：
    // 需求：進(jìn)入首頁(yè)之后 點(diǎn)擊 音樂(lè) /home/music   電影 /home/movie
    Vue.use(VueRouter);

    // 導(dǎo)航欄上 有首頁(yè)  智能題庫(kù)  登錄退出 四個(gè)按鈕

    // 用戶訪問(wèn)首頁(yè)時(shí) 看到的是首頁(yè)的內(nèi)容

     // 1.當(dāng)用戶訪問(wèn)智能題庫(kù)時(shí)，此時(shí)我們檢測(cè)用戶是否有權(quán)限訪問(wèn)該智能題庫(kù)的內(nèi)容，
     // 如果沒(méi)有 檢測(cè)用戶是否登錄過(guò)，如果沒(méi)有，則跳轉(zhuǎn)登錄頁(yè)面，登錄完成之后。

     // 在localStroage中通存儲(chǔ)該用戶的用戶名和密碼，并且立刻跳轉(zhuǎn)到智能題庫(kù)頁(yè)面
     // 2.當(dāng)用戶點(diǎn)擊黜退，該用戶直接刪除

    var Home = {
        template: `
                <div>
                    我是首頁(yè)
                </div>
         `
    };
    var Questionbank = {
        template: `
                <div>

                    我是題庫(kù)

                </div>
            `
    };

    // 登錄組件

    var Login = {
        data(){
            return {
                name:'',
                pwd:''
            }
        },
        template:`
                <div>
                    <input type="text" v-model = 'name' />
                    <input type="text" v-model = 'pwd' />
                    <input type="button"  value = '登錄' @click = 'loginHandler'/>
                </div>
        `,
        methods:{
            loginHandler(){
                alert(1);
                // 要登錄了
                // 存儲(chǔ)用戶名會(huì)被密碼 保存到 localStorage 然后跳轉(zhuǎn)相應(yīng)的路由（智能題庫(kù)）
                    localStorage.setItem('user', {name:this.name,pwd:this.pwd});

                    // 編程式導(dǎo)航
                    this.$router.push({name:'questionbank'});

            }
        }
    };
    // 3.創(chuàng)建一個(gè)路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象

        routes: [{
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/home',
                component: Home
            },
            {
                // 動(dòng)態(tài)的路由參數(shù) 以冒號(hào)開(kāi)頭
                path: '/questionbank',
                name: 'questionbank',
                component: Questionbank,
                // 給未來(lái)的路由 做權(quán)限控制
                meta:{
                    // 表明訪問(wèn)該組件時(shí)需要登錄
                    auth: true
                }

            },
            {
                path:'/login',
                component:Login
            }

        ]

    });
    // 全局的導(dǎo)航守衛(wèi)

    router.beforeEach(function(to,from,next){
        console.log(to.meta.auth);
        console.log(from);

        // 如果不調(diào)用next 那么頁(yè)面會(huì)卡主

        if(to.meta.auth){
            // 用戶點(diǎn)擊了智能題庫(kù)的導(dǎo)航 該用戶未登錄，需要登錄判斷
            if (localStorage.getItem('user')) {
                // 不為空 放行
                next()
            }else{
                // 為空  進(jìn)入登錄頁(yè)面
                  next({path:'/login'});
            }
        }else{
            // 直接放行
            next();
        }
    });

    var App = {
        template: `
                <div>
                    <router-link to = "/home">首頁(yè)</router-link>
                     <router-link to = "/questionbank">智能題庫(kù)</router-link>
                     <router-link to = '/login'>登錄</router-link>
                     <a href="javascript:void(0)" @click = 'clear'>退出</a>
                    <!--路由組件的出口-->
                    <keep-alive>
                    <router-view></router-view>
                    </keep-alive>
                </div>
            `,
            methods:{
                clear(){
                    // 退出
                    localStorage.removeItem('user');
                    this.$router.push('/login');
                }
            }
    };

    new Vue({
        el: '#app',
        components: {
            App
        },
        router,
        template: `<App />`
    });
    </script>
</body>

</html>

vue續(xù)集2
vue續(xù)集2

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手