VueRouter进阶（2）-路由元信息

CoXie 发布于2019-08-21 18:24 / 3176人阅读

摘要：简单介绍主人公字段介绍我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。

路由元信息

为什么会有这个东西呢？
我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。

简单介绍

主人公：meta字段

介绍：
我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由记录会暴露在对应路由对象上，我们可以通过$route.matched获取到当前路由所有的路由记录，$route.matched[n].meta可以获取其中一个路由记录的meta字段

栗子：

</>复制代码 
let routes = [{
    path: "/foo",
    name: "foo",
    component: foo,
    children: [{
        path: "bar",
        component: bar,
        meta: {
            needLogin: true//需要判断登录
        }
    }]
}, {
    path: "/login",
    name: "login",
    component: login
}];

假设localhost:8080为项目地址
当访问localhost:8080/#/foo/bar的时候我们需要判断登录怎么办呢
上代码（用到了导航守卫的全局守卫中的beforeEach）：

</>复制代码 
let router = new VueRouter({
    routes
});
router.beforeEach((to, from, next) => {
    //判断路由记录是否需要验证登录
    if(to.matched.some(current => current.meta.needLogin)){
        //只要记录上需要登录 我们就得验证
        /*
         * 自己封装方法判断登录 sessionstorage localstorage cookie啥的自行决定
         */
         let isLogin = getLoginStatus();//自己定义的判断登录的方法
         if(!isLogin) {
             next({
                 path: "/login", //跳转到登录页
                 query: {
                     redirect: to.fullPath //登录页需要知道从哪跳过来的，方便登录成功后回到原页面
                 }
             });
         } else {
             next();
         }
    } else {
        next();
    }
});
ATT： next一定要执行不然钩子函数不会resolved。

GPU云服务器云服务器智能路由0元智能无线路由器0元 2元vps 虚拟主机2元

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90429.html

VueRouter进阶一(导航钩子和路由元信息)

摘要：有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。进行管道中的下一个钩子。当前的导航被中断，然后进行一个新的导航。通过访问组件实例路由元信息你可以在中直接访问。导航钩子 vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。全局钩子你可以使用 router....

liukai90 2019-08-22 11:05 评论0 收藏0
VueRouter进阶四(滚动行为)

摘要：滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个方法返回滚动位置的对象信息，长这样如果返回一个布尔假的值，或者是一个空对象，那么不会发生滚动。滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面...

kumfo 2019-08-22 11:05 评论0 收藏0
VueRouter进阶（1）-导航守卫

摘要：简介主要用来通过跳转或取消的方式守卫导航。判断必要操作是否进行没进行的话中断跳转。进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是确认的。中断当前的导航。如果传入的参数是一个实例，则导航会被终止且该错误会被传递给注册过的回调。简介主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。分为三大类：全局守卫...

renweihub 2019-08-21 18:22 评论0 收藏0
Vue路由

摘要：定义路由创建实例，然后传配置创建和挂载根实例。有多种方式可以在路由导航发生时执行钩子全局的单个路由独享的或者组件级的。例如，根据上面的路由配置，这个将会匹配父路由记录以及子路由记录。因此，我们需要遍历来检查路由记录中的字段。 Vue-router(路由) 安装 CDN引入(非打包)： NPM安装(打包)： npm install vue-router 开始使用在使用V...

church 2019-08-21 16:26 评论0 收藏0
VueRouter

摘要：当对应的路由匹配成功，将自动设置属性值。执行效果依赖方法的调用参数。而这个钩子就会在这个情况下被调用。滚动行为只在支持的浏览器中可用。当且仅当导航通过浏览器的前进后退按钮触发时才可用。当对应的路由匹配成功，将自动设置 class 属性值 .router-link-active 。默认 hash 模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时...

刘厚水 2019-08-23 18:08 评论0 收藏0