vue的admin框架我在调用一个页面的时候,如果根据动态参数,设置页签的标题
时间: 2024-01-21 13:19:01 浏览: 28
在Vue的Admin框架中,可以通过动态参数来设置页签的标题。具体方法如下:
1. 在路由配置中设置动态参数,例如:
```
{
path: '/user/:id',
name: 'UserDetail',
component: UserDetail,
meta: {
title: route => `User ${route.params.id} Detail`
}
},
```
在上面的代码中,路由路径为`/user/:id`,其中`:id`是动态参数。在`meta`属性中,我们设置了一个`title`字段,其值是一个函数,用来根据动态参数生成页签的标题。
2. 在组件中使用`title`属性来设置页签的标题,例如:
```
<template>
<div>
<h1>{{ title }}</h1>
<!-- 其他内容 -->
</div>
</template>
<script>
export default {
name: 'UserDetail',
computed: {
title() {
return this.$route.meta.title(this.$route)
}
}
}
</script>
```
在上面的代码中,我们在组件中使用了一个计算属性`title`来获取当前页签的标题。这个计算属性的值是通过调用路由元信息中的`title`函数来生成的。
这样,当你打开`/user/123`这个页面时,页签的标题就会自动设置为`User 123 Detail`。