路由元信息实例 原

时间:2022-06-19
本文章向大家介绍路由元信息实例 原,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

先看官网介绍

定义路由的时候可以配置 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({});