Vue入門（9）路由2

demo路由權限控制

需求：有首頁和博客兩個按鈕，點擊首頁可以查看首頁內容，點擊博客的時候需要判斷登錄狀態。如果未登錄的話則需要跳轉到登錄頁面。

<div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/blog">我的博客</router-link>
    <router-link to="/login">登錄</router-link>
    <a href="javascripg:;">退出</a>
    <router-view></router-view>   
</div>
<script>
    
    var Home = {
        template:`
            <div>
                 我是首頁
            </div>
        `
    }

    var Blog = {
        template:`
            <div>
                 我是博客頁
            </div>
        `
    }

    var Login = {
        data(){
            return {
                name : "",
                pwd : ""
            }
        },
        template:`
            <div>
                 <input type="text" v-model="name"/>
                 <input type="password" v-model="pwd"/>
                 <input type="button" value='登錄' @click='loginHandler'/>
            </div>
        `,
        methods: {
            loginHandler(){
                //登錄,把登錄信息存到localStorage裏
                localStorage.setItem("user",{name:this.name,pwd:this.pwd})
                //編程式導航,push方法
                this.$router.push({
                    name : "blog"
                })
            }
        },
    }
    //配置路由對象
    var router = new VueRouter({
        routes : [
            {   
                path : "/",
                redirect : "/home"
            },
            {   
                path : "/home",
                component : Home
            },
            {   
                path : "/blog",
                component : Blog,
                name : "blog",
                //給未來的路由做權限控制
                meta : {
                    auth : true //證明用戶訪問改組件的時候需要登錄
                }
            },
            {   
                path : "/login",
                component : Login
            }
        ]
    })
	//全局前置守衛
    router.beforeEach((to, from, next) => {
        if(to.meta.auth){
            if(localStorage.getItem("user")){
                next()
            }else{
                next({
                     path : "/login"
                })
            }
        }else{
            next()
        }
    })

    new Vue({
        el : "#app",
        data(){
            return {

            }
        },
        router
    })

</script>