vue系列_vue-Router_组件内部的路由守卫（局部路由守卫）01-蒲公英云

vue系列_vue-Router_组件内部的路由守卫（局部路由守卫）01

如果你对vue的路由基础了解，就朝下看，不然不了解，请看vue系列_vue-Router入门和理解。

一、概念：

路由守卫：就是进入当前路由前，有个人“门卫”进行保护，也可以理解为“安检”。

在Vue组件里有个函数叫作：beforeRouteEnter。就是完成路由守卫的，表示进入当前路由前要做什么？

1、如下示例代码（先理解beforeRouteEnter函数）：

let goodslist={
    data:function(){
        return {}
    },
    template:"<h1>商品列表</h1>",
    beforeRouteEnter:function(to, from, next) {//进入组件前执行。
        console.log(to);
        console.log(from);
        next('/addGoods');//如果加了这句话，就永远进入不了当前组件，因为，无条件跳转到/addGoods
    },
    created:function(){
        console.log(this.$router);//在任何组件里都能看的router对象。因为，把router对象放在vue对象里
        console.log(this.$router.options);//这是路由配置
        console.log(this.$route);//当前路由，就是路径
    }
}

解释一、:

 示例代码中，
beforeRouteEnter:function(to, from, next) \{//进入组件前执行。  
    console.log(to);  
    console.log(from);  
    next('/addGoods');//如果加了这句话，就永远进入不了当前组件，因为，无条件跳转到/addGoods  
\},
完成的是路由守卫的工作，其实上面的代码，没有写路由守卫的逻辑，只是，解释了beforeRouteEnter函数的执行时机和参数的作用：
1、beforeRouteEnter 函数的执行时机，当点击路由连接时，进入组件时，组件还没有显示时执行
2、to：表示当前路由，即要进入的路由
3、from：表示从哪来的，

4、next() 表示下一步要干啥，next(‘/addGoods’)就表示下一步，调到路由 /addGoods

所以，以上代码的执行结果时，如果你要想跳转到当前组件，“没门”，永远进入的都是 /addGoods路由对应的组件。

解释二、:

把函数beforeRouteEnter的代码改成如下（就可以完成简单的守卫了）：

beforeRouteEnter:function(to, from, next) {//进入组件前执行。
if(!localStorage.getItem(“username”)){//如果没有登录，就先进入login组件进行登录
next(‘/login’);
}
}

二、完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">    
    </style>
</head>
<body>
    <div id="app">
        <router-link to='/addGoods'>添加商品</router-link>
        <router-link to='/goodslist'>商品列表</router-link>
        <hr/>
        <router-view/>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 登录组件
let login={
    template:"<h1>亲，先登录噢</h1>"
}    
// import addGoods from './addGoods';//引入组件：addGoods
// 定义组件（不引入了，直接定义）
let addGoods={
    data:function(){
        return {}
    },
    template:"<h1>添加商品</h1>"
}
// import goodslist from './goodslist';//引入组件：goodslist
//定义组件（不引入了，直接定义）
let goodslist={
    data:function(){
        return {}
    },
    template:"<h1>商品列表</h1>"
    ,
    beforeRouteEnter:function(to, from, next) {//进入组件前执行。
        if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进行登录
            next('/login');
        }
    }
}
//路由配置：是个json数组，不同的路径对应不同的组件
const routeObjs = [
  {
     path: '/addGoods',    //请求的路径：根目录下的addGoods
     component:  addGoods    //组件名
   },
  {
     path: '/goodslist',    //请求的路径：根目录下的goodslist
     component:  goodslist    //组件名
   },
   {
           path:'/login',
           component:login
   }
]
const router = new VueRouter({
  routes:routeObjs //routeObjs就是上面的路由配置
})
let vum = new Vue({
  el:"#app",
  router:router,//把路由对象传入到Vue对象里
  components:{
      login,addGoods,goodslist
  }
})
</script>