vue设置header
时间: 2023-08-15 21:03:52 浏览: 65
在 Vue 中设置 Header 有不同的方法,以下是其中一种常用的方法:
1. 在 App.vue 中设置 Header
在 App.vue 文件中,可以使用 Vue Router 来设置 Header。在 Header 组件中,可以使用 Vue Router 的 $route 对象来获取当前路由信息,然后根据路由信息来设置 Header 的标题。
```
<template>
<div id="app">
<Header :title="$route.meta.title" />
<router-view />
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
name: 'App',
components: {
Header
}
}
</script>
```
在路由配置文件中,设置 meta 属性来为每个路由设置标题:
```
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: {
title: '首页'
}
},
{
path: '/about',
name: 'About',
component: About,
meta: {
title: '关于我们'
}
}
]
})
```
2. 在 Header 组件中设置标题
在 Header 组件中,可以使用 props 来传递标题,然后在组件中渲染出来。
```
<template>
<div class="header">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: 'Header',
props: {
title: {
type: String,
default: '标题'
}
}
}
</script>
```
在使用 Header 组件时,可以通过传递 title 属性来设置 Header 的标题:
```
<template>
<div>
<Header title="首页" />
<p>这是首页</p>
</div>
</template>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)