vue写历史名城典故页面

在Vue.js中创建一个展示历史名城典故的页面，可以按照以下步骤进行：

1. **项目初始化**：
首先，确保你已经安装了Vue CLI，然后通过`vue create project-name`命令创建一个新的Vue应用。

2. **组件设计**：
- **历史名城列表组件**: 创建一个名为`CityStories.vue`的文件，用于显示每个城市的列表项，包含城市名称和对应的典故标题。

   <template>
     <div>
       <h2>{{ cityName }} 的典故</h2>
       <ul>
         <li v-for="story in stories" :key="story.id">
           {{ story.title }}
         </li>
       </ul>
     </div>
   </template>
   <script>
   export default {
     props: ['cityName', 'stories'],
   }
   </script>

- **城市详情组件**: `HistoricalCity.vue`，点击某个城市链接跳转到详细页，展示该城市的所有典故。

   <template>
     <div>
       <h1>{{ cityName }} 历史典故</h1>
       <CityStories :cityName="cityName" :stories="cityStories"/>
     </div>
   </template>

3. **路由配置**：
在`router/index.js`中添加路由规则，如`/cities/:cityName`匹配城市名。

   import { createRouter, createWebHashHistory } from "vue-router";
   const router = createRouter({
     history: createWebHashHistory(),
     routes: [
       // 其他路由...
       { path: '/cities/:cityName', component: HistoricalCity },
     ],
   });

4. **数据绑定和父子通信**：
- 主页 (`App.vue`) 中监听路由变化，根据城市名动态切换`HistoricalCity`组件的数据。
- 将城市数据从服务器或静态资源获取，并传递给路由组件。

5. **模板渲染**：
在`<main>`标签下使用`v-if`或`v-show`指令，根据用户是否已选择城市来显示相应的详情内容。

6. **样式优化**：
使用CSS或预处理器如Sass或Less美化界面布局和样式。