vue-router元信息meta

已于 2023-06-16 16:18:32 修改
阅读量763 收藏
点赞数 2
文章标签： web 前端 vue.js
于 2023-06-16 09:13:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinglanh/article/details/131234862
版权

vue-router路由对象里面有个特别重要的属性，也就是元信息：meta

 

meta:这个属性记录了你路由携带的一些信息，meta里面的属性，是自身定义并给他设置自身的规则的，比如说我在vue-router路由属性meta里面自定义一个title，那么在携带时候额外给title增加一些规则

创建这个title我想让他每跳转一个路由，也就是页面时，都让跳转后的页面显示我title里面的信息

例子：

而后我又针对这个title制定规则，制定如果拿取元信息bigTitle为true时，对他进行一些小改造

 

那么我跳转这个页面时会显示title里面的文字

 

 下班！！！

没啥用的新手小白
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue-router定义元信息meta操作
01-18
router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' import AView from '../views/AView.vue' import BView from '..
Vue-router中meta属性的用法
weixin_45687036的博客
02-28 1万+
Vue-router中meta属性的用法
Vue中的路由配置项meta（及权限登录不同的导航）
WuqibuHuan的博客
06-16 1万+
meta? meta简单来说就是路由元信息 也就是每个路由身上携带的信息。 列举几个例子： ①.面包屑效果 路由信息： 页面： ②.可以在路由导航守卫跳转的时候判断有没有这个信息,如果有让跳转 如： 设置meta属性 设置路由守卫 ③.根据不同的用户权限分配不同的路由导航 当我登录是，通过判断是管理员还是普通用户，引导他们进入不同的内容的index.vue组件页面。没错，只用一个页面，实现两种权限。 有多种方式 先来看下第①种： 可以提前创建几套路由规则 然
Vue.js路由组件vue-router使用方法详解
12-29
使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>vue-router使用方法</title> </head> <body> <div id=app> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. -->
vue（5）—— vue的路由插件—vue-router 常用属性方法
dingyu6453的博客
03-22 1190
前端路由 看到这里可能有朋友有疑惑了，前端也有路由吗？这些难道不应该是在后端部分操作的吗？确实是这样，但是现在前后端分离后，加上现在的前端框架的实用性，为的就是均衡前后端的工作量，所以在前端也有了路由，减轻了服务器对这方面的判断，在前端做好路由分发之后，后端就只需要写API接口了，更着重于数据交互，逻辑上的代码编写了 单页面应用 那么，既然有前端路由，每个路由是不...
关于vue-router中的路由元信息-------meta的应用
cao_peilei的博客
07-28 2060
vue路由中的路由元信息--------meta属性对象
vue-router中meta的作用
热门推荐
青颜的天空的博客
04-29 3万+
meta的定义：简单来说就是路由元信息，也就是每个路由身上携带的信息。 meta的作用：vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可 定义路由的时候可以配置 meta 字段： const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ .
Vue中如何使用路由元信息(meta)设置页面标题
三心二逸的博客
10-11 2319
在Vue的日常应用中，我们经常需要为不同的页面设置不同的标题。今天我们介绍一种简洁而高效的方法，利用Vue Router的路由元信息（meta）来实现这一功能。
Vue项目使用vue-meta插件动态修改页面标题及meta属性值完成网站SEO
m0_49969710的博客
09-14 3225
Vue项目使用vue-meta插件动态修改页面标题及meta属性值完成网站SEO
vue-router meta配置属性
juse__we的博客
10-10 1万+
https://router.vuejs.org/zh/guide/advanced/meta.html
vue-router 中 meta的用法详解
01-21
如果我想做下面这个功能： 路由 代码： 用这个获取 以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
解决VUE-Router 同一页面第二次进入不刷新的问题
11-20
最近正好遇到一个问题，修改... // 用户信息 path: '/accountDetail/:randKey', name: 'accountDetail', component: accountDetail, meta: {requiresAuth: true} }, 跳转 的地方配置： var chars = ['0', '1', '
基于vue,vue-router, vuex及addRoutes进行权限控制问题
12-10
基于vuex, vue-router,vuex的权限控制教程，完整代码地址见 https://github.com/linrunzheng/vue-permission-control 接下来让我们模拟一个普通用户打开网站的过程，一步一步的走完整个流程。 首先从打开本地的服务...
SpringBoot项目打包分离高阶操作
Record Little
04-23 742
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 214
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
前端调用WebSocket协议接口获取数据
最新发布
m0_56023096的博客
04-29 168
createWs("测试数据", (res) => {
两个前端标签
ma_no_lo的博客
04-24 159
两个前端标签
前端实现将二进制文件流，并下载为excel文件
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-23 673
介绍了前端如何实现将二进制文件流解析并下载为excel文件，以及解决容易遇到的问题。
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 386
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue-router meta
12-12
vue-router中的meta是指路由元信息，它是在路由配置中定义的一些附加信息。在使用vue-router进行页面路由的时候，我们可以利用meta来定义一些额外的信息，比如页面标题、页面描述、页面关键字、权限要求等。 我们可以在路由配置中的meta字段中添加这些信息，然后在页面中通过路由信息对象$route.meta来访问这些信息。这样就可以在页面中根据meta字段的定义来动态地设置页面的标题等信息。 另外，meta还可以用来控制页面的访问权限，比如可以在meta中定义一个requiresAuth字段，然后在路由导航守卫中根据这个字段来判断用户是否有权限访问该页面。这样就可以实现页面的权限控制功能。 总之，vue-router中的meta可以用来传递一些额外的信息和控制页面的权限访问，是非常有用的功能。通过合理地使用meta，我们可以更加灵活地管理页面路由和控制页面的访问权限。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值