专栏首页前端之攻略路由元信息实例 原

路由元信息实例 原

先看官网介绍

定义路由的时候可以配置 meta 字段:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何访问这个 meta 字段呢?

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

看一个完整的例子:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Morris.js Charts</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Morris charts -->
    <link rel="stylesheet" href="../../dist/css/Basic.css">
    <link rel="stylesheet" href="../../dist/css/lanrenzhijia.css">
</head>

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <h1>路由元信息</h1>
        <router-link to="/foo/bar">Foo</router-link>
        <router-link to="/login">login</router-link>
        <router-view></router-view>
    </div>
    
</body>

</html>
<script>
    var Foo = {
        data() {
            return {
                name: "lily"
            }
        },
        template: `
        <div>this is user {{name}} 
           <router-view></router-view>
        </div>`

    };
    var Bar = {
        template: "<div>this is the inner Bar</div>"
    }
    var Login = {
        template: "<div>this is Login </div>",
    };
    const router = new VueRouter({
        routes: [{
            path: "/foo",
            name: "foo",
            component: Foo,
            children: [{
                path: "bar",
                component: Bar,
                meta: { requiresAuth: true }
            }]
        }, {
            path: "/login",
            name: "login",
            component: Login,
        }],

    })
    router.beforeEach((to, from, next) => {
                console.log(to.matched); 
                if (to.matched.some(record => record.meta.requiresAuth)) {
                        //只要记录上需要验证,我们就要验证,自己封装方法判断登录 如localstorage cookie
                        //let isLogin = getLoginStatus();
                        let isLogin = false;
                        if (!isLogin) {
                            next({
                                path: "/login", //如果没有登录跳转到登录页
                                query: {
                                    redirect: to.fullPath //登录页需要知道从哪跳转过来的,方便登录后回到原页面
                                }
                            })
                        } else {
                            alert("next")
                            next() //如果需要验证,并且已经登录则直接跳转
                        }
                    } else {
                        next() //如果不需要验证,则直接跳转
                    }
                }) 
    var app = new Vue({ router }).$mount("#app")
    </script>

当点击Foo链接时to.matched是含有2个元素的数组,其中每个元素都是一个对象,下标为0的对象含有path:"/foo"  另一个下标为1的对象含有path:"/foo/bar"与meta:{requiresAuth:true}

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vueRouter-编程式的导航 原

    除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。 router.push(locatio...

    tianyawhl
  • Vue cli入门 原

    最近看到一个vue cli入门的例子,写的非常详细,对入门vue cli很有帮助,原文链接

    tianyawhl
  • vueRouter-Getting Started

    用Vue.js+vue-router创建单页应用是非常简单的。使用Vue.js,我们已经可以通过组合组件来组成应用程序,当你把vue-router添加进来,我们...

    tianyawhl
  • Oracle学习笔记三

      一个表空间可以与多个数据文件(物理结构)关联一个数据库下可以建立多个表空间,一个表空间可以建立多个用户个用户下可以建立多个表。

    Kevin_Zhang
  • 1亿神经元,秒杀深度学习千倍!英特尔发布最强神经拟态计算系统

    对于传统的人工智能来说,这不是一件容易事。主流的深度学习神经网络,可能需要设置上亿个参数,训练数十万次,才能辨别出猫和狗的区别,更不用说更为陌生的气味识别领域。...

    新智元
  • 英特尔研发神经元AI处理器,模仿大脑功能,无需训练数据集

    陈桦 问耕 编译整理 量子位 出品 | 公众号 QbitAI ? 刚刚,黄仁勋在北京跑步上台演讲,庄严宣布:CPU的时代结束了。 好巧,英特尔说:不单CPU不行...

    量子位
  • Go语言调度器源代码情景分析之十:线程本地存储

    本文是《go调度器源代码情景分析》系列 第一章 预备知识的第十小节,也是预备知识的最后一小节。

    阿波张
  • ICML 2018 | 腾讯AI Lab提出误差补偿式量化SGD:显著降低分布式机器学习的通信成本

    作者:Jiaxiang Wu、Weidong Huang、Junzhou Huang、Tong Zhang

    机器之心
  • 英特尔着力推动神经形态芯片量产化

    在后摩尔定律时代,英特尔实验室正在测试其研发的神经形态芯片,这种芯片在实现实时学习和自适应控制等时效性较高的目标方面比传统的CPU和可编程逻辑芯...

    人工智能快报
  • [每日一题]C语言程序设计教程(第三版)课后习题6.4

    题目描述 求Sn=1!+2!+3!+4!+5!+…+n!之值,其中n是一个数字(n不超过20)。 输入 n 输出 和 样例输入 5 样例输出 153 提示 此...

    编程范 源代码公司

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动