涔濄€乂ue Router 杩涢樁-璺敱鍏冧俊鎭痬eta

Posted 2020-11-26

鏍囩锛?a href='http://www.mamicode.com/so/1/lse' title='lse'>lse   璁板綍   鍏ㄥ眬   class   script   next   杩涢樁   each   redirect   

璺敱鍏冧俊鎭?meta

鍦ㄨ矾鐢卞垪琛ㄤ腑锛屾瘡涓矾鐢遍兘鏈変竴涓?meta鍏冩暟鎹瓧娈碉紝鎴戜滑鍙互鍦ㄨ繖閲岄厤缃竴浜涜嚜瀹氫箟淇℃伅锛屼緵椤甸潰缁勪欢鎴栬矾鐢遍挬瀛愬嚱鏁颁腑浣跨敤銆傚湪璺敱璺宠浆鐨勬椂鍊欙紝鎻愪緵鎴戜滑鍒ゆ柇鏉′欢銆?/p>

<script>
    // 閰嶇疆 meta 鏁版嵁
    const router = new VueRouter({
        routes: [
            {
                path: '/',
                name: 'index', // 璺敱鍚嶇О
                component: index, // 鏄犲皠鐨勭粍浠?                meta: {
                    title: '棣栭〉'
                }
            }
        ] 
    });
</script>

鍦ㄧ粍浠朵腑鑾峰彇 meta 鏁版嵁

<template>
    <div>
        <h1>{{ $route.meta.title }}</h1>    
    </div>
</template>

鍦ㄨ矾鐢遍挬瀛愪腑鑾峰彇 meta 鏁版嵁锛屼竴鑸敤浜庯細 鏀瑰彉缃戦〉鏍囬锛岀敤鎴风櫥褰曢壌鏉?/p>

// 鍏ㄥ眬璺敱鏀瑰彉鍓嶅鑸畧鍗?router.beforeEach((to, from, next) => {
    // 閫氳繃鍏冧俊鎭紝鏀瑰彉瀵瑰簲缃戦〉鐨勬爣棰?    window.document.title = to.meta.title;
    next();
});
// 娉ㄦ剰锛歮eta鏁版嵁鍙互鍔ㄦ€佷慨鏀癸紝濡傦細this.$route.meta.title = '鏀瑰彉鍚庣殑棣栭〉'

绀轰緥锛?鐢ㄦ埛鐧诲綍閴存潈锛?濡傛灉娌℃湁鐧诲綍鍒欒烦杞櫥褰曠晫闈?/p>

router.beforeEach((to, from, next) => {
    // 鍒ゆ柇鏄惁闇€瑕佺櫥褰?    if (to.matched.some(record => record.meta.login )) {
        if (!login) { // 鏈櫥褰曪紝鍒欒烦杞埌鐧诲綍鐣岄潰
            next({ 
                path: '/login',
                query: { redirect: to.fullPath } // 璁板綍鐧诲綍鍚庤烦杞埌鏉ユ簮椤甸潰
            })
        } else {
            next();
        }
    } else {
        next(); 
    }
});

Array some() 鏂规硶

鐢ㄤ簬妫€鏌ユ暟缁勪腑鐨勫師鐢熸槸鍚︽弧瓒虫寚瀹氭潯浠讹紝璇ユ柟娉曚細渚濇鎵ц鏁扮粍鐨勬瘡涓€涓厓绱犮€?*濡傛灉鏈変竴涓厓绱犳弧瓒虫潯浠讹紝鍒欒繑鍥?code>true锛屽惁鍒欒繑鍥?code>false銆?/p>

var arr = [
    { login: true },
    { title: 'login' } 
]
arr.some((item) => item.login);  // 杩斿洖true