在pages 目录下新建about/about.vue 页面。然后转到pages.json 文件,在pages 属性中找到这个页面的配置项,将navigationBarTitleText 属性的值改为“关于”。的步骤
时间: 2024-10-28 21:09:24 浏览: 8
vite vue3 import.meta.glob动态路由
在Vite或Vue CLI项目中,创建一个新的页面并更新`pages.json`文件通常会涉及以下几个步骤:
1. **创建about/about.vue页面**:
- 打开命令行工具(如Git Bash、PowerShell或终端)并导航至项目的root目录。
- 使用`touch`或`mkdir -p`创建`pages/about`目录,如果还没有的话,因为`about.vue`通常会放在`pages`下的子目录里:
```
mkdir -p pages/about
```
- 然后在`pages/about`目录下创建`about.vue`文件,可以用文本编辑器(如Visual Studio Code)打开它,并添加基础的`<template>`、`<script>`和`<style>`结构:
```html
<template>
<!-- 你的页面模板代码 -->
</template>
<script>
export default {
// 你的组件配置
}
</script>
<style scoped>
/* 你的样式 */
</style>
```
2. **更新pages.json文件**:
- `pages.json`位于项目根目录,用于描述应用的路由结构。打开这个文件,找到类似这样的部分:
```json
{
"routes": [
{ "path": "/", "component": "pages/index/index.vue" },
// ...
]
}
```
- 添加新的页面配置:
```json
{
"routes": [
{ "path": "/about", "component": "pages/about/about.vue", "meta": { "navBarTitleText": "关于" } },
// ...
]
}
```
- 将`navigationBarTitleText`属性设为你想要的值,这里是"关于"。
3. **保存并刷新**:
- 保存`pages.json`,确保所有改动都已保存。现在你应该可以在浏览器中通过访问`http://localhost:3000/#/about`看到你的新页面,并且标题显示为"关于"。
阅读全文