vue路由（十三）路由元信息meta和动画transition的使用

1 路由元信息meta

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]

看看实例怎么用

const routes = [{
    path: '/',
    name: 'Home',
    //component: Home,
    //2 引入进来
    components: {
      default: Home,
      footerName: Footer
    }
  },
  {
    path: '/Login',
    name: 'Login',
    components: {
      default: Login,
    }
  },
  {
    path: '/Form/:id(\\d+)',
    name: 'Form',
    //3 需要的组件或者页面引入进来
    components: {
      default: () => import('../views/Form.vue'),
      footerName: Footer
    },

  },
  {
    path: '/Test',
    name: 'Test',
    meta: {
      title: "是否有权限",
      transition: "abcd"
    },
    components: {
      default: () => import('../views/Test.vue'),
      footerName: Footer
    },
    props: {
      default: route => {
        return route.query.search
      },
      footerName: {
        footerdata: "正版"
      }
    },
    //路由独享守卫
    beforeEnter: (to, from, next) => {
      if (to.meta.title) {
        console.log('meta后执行', to.meta.title)
      }
      console.log('000', to, from)
      next()
    }
  }, {
    path: '/Profile/:username/:userid',
    name: 'Profile',
    components: {
      default: () => import('../views/profile.vue'),
      footerName: Footer
    },
    props: {
      default: true, //也可以选择false,不展示
      footerName: {
        footerdata: "正版"
      }
    }
  },
  //路由别名
  {
    path: '/Posts',
    name: 'Posts',
    component: () => import('../views/posts.vue'),
    alias: '/bieming'
  },
  {
    path: '/:all',
    name: 'Router404',
    component: () => import('../views/Router404.vue')
  }
]

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

1.1.路由独享守卫可以处理

1.2 .路由全局前置守卫也可以处理（比1执行早）

//判断是否登录了
let flag = false;
// //全局前置守卫
router.beforeEach((to, from, next) => {

  if (to.meta.title) {
    console.log('meta先执行', to.meta.title)
  }


  flag = localStorage.getItem('userToken') ? true : false
  console.log('00', to, from)
  //1判断有token权限
  if (flag) {
    //1.2判断要去的页面是login时，让他跳转到首页
    if (to.name === 'Login') next('/')
    //1.3 如果不是，继续往下走
    next()
  } else {
    //2判断没有token权限
    //2.1如果要去登录页面，那就去
    if (to.name === 'Login') next()
    //2.2如果不去登录页面，也让去登录页面，因为没token权限（这么写是为了）
    else next('/Login')
  }
})

2 动画处理 APP.vue一般在这个页面

<template>
  <div id="app" style="margin: 50px; line-height: 34px; width: 800px">
    <h3>Test传递一个参数</h3>
    <el-button> <router-link to="/Test">Test</router-link></el-button>
    <el-button>
      <router-link to="/Profile/name张三/123">Profile</router-link></el-button
    >
    
    <!-- 路由包裹起来就可以 -->
    <router-view v-slot="{ Component }">
      <transition :name="route.meta.transition || 'fade'">
        <component :is="Component" />
      </transition>
    </router-view>
    <!-- 4 再写一个路由视图器 footerName对应 components中的键 -->
    <router-view name="footerName"></router-view>
  </div>
</template>

固定写法

<router-view v-slot="{ Component }">

</transition>

</router-view>

注意： <transition :name="route.meta.transition || 'fade'"> 这一句表示从路由获取有没有动画效果，没有的话就用fade。默认的，有的话，就用路由的

因为test页面加了abcd，所有会加载下面abcd开头的css

css

.fade-enter-from,
.fade-leave-to {
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  /*定义进入和离开过渡状态的透明度变化的时间和变化曲线*/
  transition: opacity 0.8s ease;
}

.abcd-enter-from,
.abcd-leave-to {
  /*定义进入开始和离开结束的透明度为0*/
  opacity: 0;
}

.abcd-enter-to,
.abcd-leave-from {
  /*定义进入结束和离开开始的透明度为1*/
  opacity: 1;
}

.abcd-enter-active,
.abcd-leave-active {
  /*定义进入和离开过渡状态的透明度变化的时间和变化曲线*/
  transition: opacity 0.2s ease;
}

vue路由（十三）路由元信息meta和动画transition的使用

猜你喜欢