路由追加及路由控制

路由追加

通过前面几篇文章，我们可以知道配置路由对象的方式可以这样写：

       // 第一种加载路由的方式
        var router = new VueRouter({
            // 这里可以直接传 也可以不传
            // 4. 配置路由对象
            routes: [
                {
                    path: "/login", component: login,
                    children: [
                        { name: "login.women", path: "women", component: women },
                        { name: "login.man", path: "man", component: man }
                    ]
                },
                { path: "/rigister", component: rigister }
            ] //login 是一个组件对象
        });

简单来看，就是new VueRouter({...})

但是，如果我们想动态地进行路由的添加，又该怎么做呢？

其实VueRouter有一个addRoutes方法可以实现路由的动态追加，如下：

        // 路由追加 更为灵活地动态追加路由
        var router = new VueRouter();

        router.addRoutes([
                {
                    path: "/login", component: login,
                    children: [
                        { name: "login.women", path: "women", component: women },
                        { name: "login.man", path: "man", component: man ,meta:{
                            isChecked:true
                        }}
                    ]
                },
                { path: "/rigister", component: rigister }
            ]);

可见，我们只是把路由剪切到外面了，将路由数组放进了一个通过VueRouter函数对象方法addRoutes中作为参数，即可成功配置路由。

然而，如果只是写了router.addRoutes是不起作用的，还需要加上下面这一段代码。
        router.beforeEach(function(to, from, next){
            console.log(to)
            console.log(from)
            next()
        })
router.beforeEach现在是异步工作的，并且携带一个 next 函数作为其第三个参数。

router.addRoutes()的意思是：每次路由配置后，渲染组件到router-view之前

在function里面，next()表示“放行”，如果不写上next()，函数就会卡主（不放行）

路由控制

在了解路由控制之前，需要先了解一个概念——“路由钩子”。 其实我们可以把“钩子”理解成执行的过程或是周期。我们在vue生命周期这片文章里面提到的函数，比如：

  • beforeCreate（组件创建前）
  • created（组件创建完毕）
  • beforeMount（组件装载前）
  • mounted（组件装载完毕）
  • beforeUpdate（组件改动前）
  • updated（组件改动完毕）
  • beforeDestroy（组件销毁前）
  • destroyed（组件销毁完成）

都是函数钩子

从上面的例子可以看出，router.addRoutes()也是一个函数钩子——路由钩子！

进一步，我们可以推导出，既然我们可以做Vue生命周期的钩子函数中进行数据的操作，那么我们又是否能在路由钩子里面进行一些有趣的操作呢？答案是可以的，而这样的一个操作，就是我们要讲的路由控制。

.

路由配置里面的关键操作点：

  • 路由meta元数据->meta是对于路由规则是否需要验证权限的配置
  • 路由钩子->权限控制的路由执行时期
1. 路由meta元数据
router.addRoutes([
                {
                    path: "/login", component: login,
                    children: [
                        { name: "login.women", path: "women", component: women },
                        { name: "login.man", path: "man", component: man ,meta:{
                            isChecked:true
                        }}
                    ]
                },
                { path: "/rigister", component: rigister }
            ]);

在第六行，我们可以看到 meta:{isChecked:true},这就是路由meta元数据

2. 路由钩子router.addRoutes(function(to, from, next){})
  • 当我们第一次点击一个超链接的时候，触发的是to，console.log(to)会把这个超链接的相关信息打印出来，而from却是空的，即为“null”。
  • 当我们第二次点击另一个超链接时，to即为点击的超链接，from即为上一次点击的超链接
  • 注意：重复点击同一个超链接是不会有输出的
3. 控制路由思路

利用next() 原理，通过meta判断该特定属性是否为默认值，若非期望值，则不允许放行（即无next()）

我们来看关键代码：



var flag = true
var login = {

    template: `
      <div>
        
        这里是login界面 独占一行
        <router-view></router-view>
      </div>`,

    created:function(){
        flag = false // 如果点击了登录 就不提示登录
    }
}
router.beforeEach(function(to, from, next){

    console.log(to) // 点击的超链接
    console.log(from) // 上一次点击的超链接
    
    if(to.name == "login.index" || to.path == "/"){
        next()
    }else{
        if(flag){
            alert("请先登录！")
        }else{
            next()
        }
    }

})

在这个例子中我们并没有用到路由meta元数据，同样实现了路由控制的功能。

附上demo源码：点击查看