html - 如何在 vuetify 上使标题栏动态化?
问题描述
我看到 vuetify 项目有标题栏。但是 public/index.html 中的标题。外部 src 文件夹
所以我很难让它动态化。每个页面必须有不同的标题。如果相同,对SEO影响很大
我的 public/index.html 是这样的:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>test-vuetify</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but test-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
我怎么解决这个问题?我想让每一页的标题都不一样。根据页面内容
解决方案
很难从问题中准确说出您的限制是什么,但如果这有助于其他人使他们的 Vuetify 标题栏动态化......
在index.js
中,向路线添加一些“元”:
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/page1',
name: 'page-1',
component: ...,
meta: {
title: 'Page 1'
}
},
{
path: '/page2',
name: 'page-2',
component: ...,
meta: {
title: 'Page 2'
}
}
]
const router = new VueRouter({
mode: 'history',
base: (your base url),
routes: routes,
});
export default router
然后在 Vuetify 标题栏中,使用上面定义的路由元:
<v-toolbar-title>{{ $route.meta.title || "Default title" }}</v-toolbar-title>
推荐阅读
- xcode - 在 xCode 中自定义控制视图外观
- validation - 如何使用 Microsoft Access 中的验证规则限制字符?
- for-loop - for循环VHDL中的if语句
- python - 在多个 AWS 实例上运行并行 Python 代码
- python - 如何让网格布局中的两个小部件相互对齐?
- java - 找不到 spring-boot-2.3.0.BUILD-SNAPSHOT.jar 错误
- linux - 将大 tar 文件拆分为多个 tar 文件
- kubernetes - kubectl apply with stringData in secret does not remove fields
- jenkins - 如何在 SonarQube 中生成 HTML 或 PDF 报告?
- mysql - 在配置 innodb_buffer_pool_size 时,如果您有很多小型网站而不是单个网站,该值应该不同吗?