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>