Vue项目实战03 : vue中 meta 路由元信息

路由元信息

meta：

每个路由的标识信息，是路由独有的一个信息，无论在路由中是否定义meta，在组件中都可以通过this.$route.meta访问到，如果没有定义，返回{}

在组件中：

this.$route.meta获取该组件的路由元信息，如果未定义，则返回{}

在路由中:

通过router.beforeEach((to,from,next)=>{
　　　　　　console.log(to.meta)
　　})
　　
给每个路由的配置项多一个meta属性
meta:{
　
}

路由元信息用途

根据每个路由特有的信息
1.验证用户是否登录
2.设置标题
3.是否显示某个组件
4.组件是否缓存……

验证用户是否登录，设置标题，举例：

import Vue from 'vue'
import Router from 'vue-router'import Header from "../components/header"
import Detail from "../components/goodsDetails"
import Login from "../components/login"
import goodsList from "../components/goodsList"
Vue.use(Router)let router = new Router({routes: [{path: '/',redirect: Header}, {path: '/details/:name/:price/:id',name: 'details',component: Detail,meta: {isLogin: true,title: "详情页"}},{path: '/login',name: 'login',component: Login,meta: {isLogin: false,title: "登录页"}}, {path: '/goodsList',name: "goodsList",component: goodsList,meta: {isLogin: false,title: "列表页"}}]
})//判断是否登录
router.beforeEach((to, from, next) => {// console.log(to);//设置标题document.title = to.meta.title;//判断是否登录let token = true;if (to.meta.isLogin) {if (token) {next();} else {next("/login")}}next();})export default router;

组件缓存

<keep-alive><router-view></router-view>
</keep-alive>

<!-- 这里是需要keepalive的 -->
<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive><!-- 这里不会被keepalive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

{path: '',name: '',component: ,meta: {keepAlive: true} // 这个是需要keepalive的
},
{path: '',name: '',component: ,meta: {keepAlive: false} // 这是不会被keepalive的
}

如果缓存的组件想要清空数据或者执行初始化方法，在加载组件的时候调用activated钩子函数，如下：

activated: function () {this.data = '';
}

Vue项目实战03 : vue中 meta 路由元信息相关推荐

【Vue项目实战】vue.js2.5 饿了么APP（1）概述+项目准备
一.概述 1. 项目简介使用vue.js vue是当前最火的MVVM框架,(优点:轻量.简洁.高效.数据驱动.组件化) 本项目做的是:高仿上线外卖APP商家模块开发过程:需求分析-脚手架工具-数据 ...
【vue项目实战】Vue工程化项目--猫眼电影移动端
这里是仿猫眼移动端.使用 vue-cli 创建项目. 本节先介绍并进行项目的初始化,然后把主框架搭起来,熟悉路由和组件,后面在项目demo 持续贴出完整项目代码.也会更新博客. 第二节传送 ...
Vue项目实战02 : vue项目刷新当前页面的三种方法
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router ...
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
vue工程化第二节添加内容和样式使用axios请求数据,参考这里添加局部左右滑动(即将上映页),参考 (左右滑动也可使用插件) 组件化开发,相同代码可以提取出来作为一个组件来调用,减少代码量,提 ...
Vue项目实战01: vue里父传子传事件(easy)
vue中的组件通信相信小伙伴们已经达到炉火纯青的地步了提到vue里父子组件通信脑子里第一个想到的是不是使用$emit来传递. 实现肯定是能实现的下面我们一起看一下一种简单的方法父组件: 在父 ...
Vue项目实战04 : Vue 轮询接口的实现
项目中我们经常需要实现轮询-每隔几秒请求一次接口刷新数据一般都会使用setInterval,但要注意单纯使用它会导致页面卡死,所以一定要清除定时器 setInterval不会清除定时器队列,每重复执 ...
vue路由第三篇-导航守卫、路由元信息、动态路由
导航守卫 1. 环境准备 1.1 安装Element-Plus npm install element-plus 1.2 注册Element-Plush 需要在 main.ts 文件中注册 impor ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...

Vue项目实战03 : vue中 meta 路由元信息

路由元信息

路由元信息用途

验证用户是否登录，设置标题，举例：

组件缓存

如果缓存的组件想要清空数据或者执行初始化方法，在加载组件的时候调用activated钩子函数，如下：

Vue项目实战03 : vue中 meta 路由元信息相关推荐

最新文章

热门文章