vue动态修改meta的title

本文介绍了一种在不移除原生导航栏的情况下实现详情页动态标题的方法,通过将列表页传递的name参数赋值给路由元信息meta的title属性,并最终绑定到document.title上,以确保每次跳转都能正确显示最新的页面标题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述
需求:不去掉原生导航栏的情况下实现详情页的动态title(列表页query携带参数name到详情页实现动态title)
在这里插入图片描述

@on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})"

列表页点击携带name到详情页职位详情页的title,并且赋值给router里面的meta的title,然后绑定到原生的document.title上!

created(){
         this.category_id = this.$route.query.id;//列表的详情id
         this.$route.meta.title = this.$route.query.name;//列表的名称
         document.title = this.$route.meta.title;
    }

注意:一开始的逻辑是直接拿到name赋值到原生document.title上!但是这样路由跳转可能会有meta的title会出现空值的状态,需要点击两次才出现页面的动态title,如果点击第二次会出现上一次的title,因为第二次的点击没有经过router.js!

router.afterEach((to, from, next) => {
  if (to.path === '/yunCrm' && to.query.name) {
  to.meta.title = to.query.name;
  document.title = to.meta.title;
  }
});

router.js里面需要实现路由的判断,因为页面的title值最终的是显示的是meta里面的title,而不是query携带过来的name,有点绕,一开始是直接赋值,但是会出现空值现象,也感谢朋友的帮助与提醒!!!

注:首先得使用to.query.name来接收列表页传来的真实值再赋值给最终显示的to.meta.title!!

在这里插入图片描述

### Vue.js 中 `router.push` 方法与 Meta 字段的使用 在 Vue Router 中,路由配置可以包含一个名为 `meta` 的字段。这个字段允许开发者向路由对象添加自定义属性,在导航过程中这些元数据可以帮助实现更复杂的逻辑控制。 当通过 `router.push` 进行页面跳转时,可以通过访问 `$route.meta` 来获取当前激活路径下的所有 meta 属性[^1]: ```javascript // 定义带 meta 字段的路由规则 const routes = [ { path: '/myAction', name: 'MyAction', component: MyComponent, meta: { requiresAuth: true } // 自定义 meta 数据 } ]; ``` 为了演示如何利用带有 meta 字段的方式执行特定操作,下面是一个完整的例子,展示了怎样基于不同的 meta 值来决定是否显示某个组件中的按钮[^2]: ```html <template> <div v-if="!$route.meta.requiresAuth"> <!-- 如果不需要认证,则渲染此按钮 --> <button @click="handleButtonClick">Click Me</button> </div> </template> <script> export default { methods: { handleButtonClick() { const el = this.$refs.someElement; let recIdx = Number(this.$refs.someElement.getAttribute("storeIdx")); console.log(`点击了 ${this.$guid} 在索引位置 ${recIdx}`); // 使用 router.push 并传递参数给目标路由 this.$router.push({ name: 'myAction', params: { associatedStoreName: el.item.associatedStoreName, idx: recIdx } }); } } }; </script> ``` 在这个案例里,假设有一个条件判断语句用于检查 `$route.meta.requiresAuth` 是否存在以及其布尔值状态;如果不存在或为 false 则会展示按钮并绑定相应的事件处理器。一旦触发 click 事件就会调用 `eventRouter.Route()` 函数模拟发送请求到服务器端处理,并最终通过 `router.push` 实现页面间的转换。 需要注意的是实际项目开发中可能还需要考虑更多因素比如权限验证失败后的提示信息、重定向至登录页等功能扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值