vue动态修改meta的title

在这里插入图片描述
需求:不去掉原生导航栏的情况下实现详情页的动态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!!

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue Router 的 meta 属性可以用来存储一些额外的信息,比如页面标题、页面描述、页面关键词等等。这些信息可以在路由跳转时动态修改,以便更好地满足业务需求。 要动态修改 meta 属性,可以通过路由导航守卫中的 to 和 from 参数来获取当前路由和目标路由的 meta 属性,然后进行修改。具体操作如下: 1. 在路由配置中定义 meta 属性,例如: ``` const routes = [ { path: '/home', component: Home, meta: { title: '首页', description: '这是一个演示页面' } }, // ... ] ``` 2. 在路由导航守卫中获取当前路由和目标路由的 meta 属性,并进行修改,例如: ``` router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } if (to.meta.description) { document.querySelector('meta[name="description"]').setAttribute('content', to.meta.description) } next() }) ``` 在上面的代码中,我们首先判断目标路由是否定义了 title 和 description 属性,如果有就分别修改页面标题和 meta 描述。注意,这里我们使用了 document.title 和 document.querySelector() 方法来获取和修改页面标题和 meta 描述。 总之,通过动态修改 meta 属性,我们可以更好地控制页面的 SEO 优化和用户体验,提高网站的质量和效益。 ### 回答2: vue.router.metaVue.js路由的一种设置方式,可以用于添加元数据(Metadata)到路由信息中。元数据可以是任何用于描述路由的数据,如标题、关键词、描述、权限等等。通过修改这些元数据,我们可以动态修改当前页面的信息。 动态修改meta的方式主要有两种:一是在路由跳转前修改meta,二是在组件内动态修改meta。 在路由跳转前修改meta,可以通过导航守卫(beforeEach)来实现。在beforeEach中获取当前路由的元数据(meta),然后修改其属性值即可。例如: ``` router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title + ' - My Website' } next() }) ``` 这段代码中,我们通过判断当前路由的meta中是否定义了title属性,如果有,则动态修改页面标题。 在组件内动态修改meta,则可以直接通过this.$route.meta来获取当前路由的元数据,然后修改其属性值。例如,在组件内根据接口返回的数据动态设置meta: ``` <script> export default { name: 'About', async mounted() { const data = await fetch('/api/about') this.$route.meta.title = data.title this.$route.meta.keywords = data.keywords this.$route.meta.description = data.description } } </script> ``` 这段代码中,我们在组件的mounted事件中使用fetch获取了接口返回的关于页面的数据,然后动态设置meta的属性值。 总之,使用vue.router.meta动态修改元数据是一种非常灵活的方式,可以根据具体的业务需求来进行修改。需要注意的是,修改meta后需要重新渲染页面才能生效。 ### 回答3: vue.router.metaVue.js的一个路由元信息属性,可以通过该属性在路由对象中添加额外的数据。这些数据可以在多个不同的组件中获取和使用。此外,vue.router.meta还可以动态修改,以满足不同组件对路由信息的动态需求。 如何动态修改vue.router.meta?我们可以通过在Vue.js的路由钩子函数中操作vue.router.meta来实现动态修改。具体来说,我们可以使用beforeEach来实现动态修改。例如,假设我们有一个名为userInfo的路由元信息属性,我们想要根据登录状态动态修改它的值: ``` const router = new VueRouter({}) router.beforeEach((to, from, next) => { if (isLoggedIn()) { to.meta.userInfo = { name: 'John', age: '28' } } else { to.meta.userInfo = { name: '', age: '' } } next() }) ``` 在上面的代码中,我们首先检查用户是否已经登录。如果已经登录,我们使用to.meta.userInfo属性来设置用户信息;如果没有登录,我们将to.meta.userInfo属性设置为空对象。这样,在每个组件中,我们就可以通过this.$route.meta.userInfo来获取当前路由的用户信息,以实现不同的逻辑需求。 需要注意的是,在修改vue.router.meta时,我们应该始终谨慎处理,确保数据的安全和正确性。另外,我们还可以在其他Vue.js的生命周期函数中对vue.router.meta进行修改,例如mounted、created等。总之,vue.router.meta提供了一种方便而有用的方式来管理路由元信息,在Vue.js开发中有着广泛的应用前景。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值