九、Vue Router 进阶-路由元信息meta

路由元信息 meta

在路由列表中,每个路由都有一个 meta元数据字段,我们可以在这里配置一些自定义信息,供页面组件或路由钩子函数中使用。在路由跳转的时候,提供我们判断条件。

<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 数据,一般用于: 改变网页标题,用户登录鉴权

// 全局路由改变前导航守卫
router.beforeEach((to, from, next) => {
    // 通过元信息,改变对应网页的标题
    window.document.title = to.meta.title;
    next();
});
// 注意:meta数据可以动态修改,如:this.$route.meta.title = '改变后的首页'

示例: 用户登录鉴权, 如果没有登录则跳转登录界面

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() 方法

用于检查数组中的原生是否满足指定条件,该方法会依次执行数组的每一个元素。**如果有一个元素满足条件,则返回true,否则返回false

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

原文地址:https://www.cnblogs.com/yuxi2018/p/11967281.html

时间: 2024-10-17 08:12:53

九、Vue Router 进阶-路由元信息meta的相关文章

vue-router路由元信息及keep-alive组件级缓存

路由元信息?(黑人问号脸???)是不是这么官方的解释很多人都会一脸懵?那么我们说meta,是不是很多人恍然大悟,因为在项目中用到或者看到过呢? 是的,路由元信息就是我们定义路由时配置的meta字段:那么这个meta的作用是什么呢? 首先看一个场景: 通常我们在开发网站或者移动应用的时候,我们通常会有网页权限验证的需求(别说你没有,你肯定有),这种需求一般是指需要登录后才可进入,也就是需要用户登录获取用户Token或者用户信息之后才可进入:当这个需求下来的时候,我们作为前端开发人员的第一反应是路由

Vue router 全局路由守卫

记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from 'vue-router' import store from './../store' import Home from 'components/home/home' // 主页组件 // 其它组件... import Cart from 'components/cart/cart' // 购物车组

HTML学习日记之元信息meta标记

所谓meta标记就是用来描述一个HTML网页文档的属性,也称为元信息,这些信息并不会显示在浏览器的页面中,例如作者.日期和时间.网页描述.页面刷新等. 基本语法: <meta name = " "content=" "> <meta http-equiv=" " content = " "> name属性与content属性 name属性用于描述网页,它是以"名称/值"形式的名称,n

八、Vue Router 进阶-导航守卫

导航守卫 所谓的导航守卫,就是路由的钩子函数.主要用来通过跳转或取消导航.导航守卫分三种:全局.路由独享.组件级的. 注意:参数或查询的改变并不会触发进入和离开的导航守卫.可以通过watch监听$route对象,或使用beforeRouteUpdate的组件内守卫. 全局前置守卫 进入路由之前的钩子函数,接受next函数,在此可以阻止进入路由或跳转到指定路由. <script> const router = new VueRouter({ ... }); // 接收三个参数:to为目标路由对象

vue router动态路由

<div id="#app"> <router-link to="/user/header">路由1</router-link> /*指向user组件*/ <router-link to="/user/footer">路由2</router-link> /*指向user组件*/ /*当我们点击路由1得时候*/ /*------当我们点击路由2得时候*/ <router-view&g

六、Vue Router 嵌套路由

嵌套路由 在入口模板中设置的<router-view>是最顶层的出口.子组件中可以嵌套<router-view>为子路由匹配的出口. const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> ` } 要在嵌套的出口中

十、Vue Router 进阶-获取数据

获取数据的两种方式 导航完成之后获取数据:先完成导航,然后在接下来的组件生命周期钩子created中获取数据.在数据获取期间展示一个loading加载中的状态提示. 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航. 导航完成之后获取数据(可展示loading) 在组件的created钩子中获取数据.在获取数据期间展示一个loading状态,可以在不同视图间展示不同的loading状态. <template> <div class="post&

Vue.js路由管理器 Vue Router

起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p>

vue router 导入方式

vue router 的路由导入方式可用以下两种: 一:直接导入 import Hello from '@/components/Hello' @是在webpack.base.conf.js 配置: resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } } 二 :路由懒加载方式 当打包构建应用时,Javascript包会变得非常大