Routing meta information instance

Keywords: Vue IE

First look at the official website

When defining routes, you can configure the meta field:

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

How to access this meta field?

First, we call each routing object in the routes configuration a routing record. Route records can be nested, so when a route matches successfully, it may match multiple route records

For example, according to the above routing configuration, / foo/bar will match the parent and child routing records.

All route records to which a route matches are exposed as $route.matched arrays of $route objects (and route objects in the navigation guard). Therefore, we need to traverse $route.matched to check the meta field in the route record.

Take a complete example:

<!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>Routing meta information</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)) {
                        //As long as the record needs to be verified, we need to verify it. We need to encapsulate our own methods to determine the login, such as localstorage cookie
                        //let isLogin = getLoginStatus();
                        let isLogin = false;
                        if (!isLogin) {
                            next({
                                path: "/login", //If you are not logged in, go to the login page
                                query: {
                                    redirect: to.fullPath //The login page needs to know where to jump from, so it is convenient to return to the original page after login
                                }
                            })
                        } else {
                            alert("next")
                            next() //If you need to verify and have already logged in, skip directly
                        }
                    } else {
                        next() //If verification is not required, skip directly
                    }
                }) 
    var app = new Vue({ router }).$mount("#app")
    </script>

When you click the Foo link, to.matched is an array of two elements, each of which is an object. The object with subscript 0 contains path:"/foo". The other object with subscript 1 contains path:"/foo/bar" and meta:{requiresAuth:true}

Posted by jarcoal on Sat, 04 Jan 2020 00:00:34 -0800

Programmer Group

Routing meta information instance

Hot Keywords