《旅游网站开发》旅游网站城市列表页面开发

1. 城市选择页面路由配置

• src/router/index.js

import Home from '@/pages/home/Home'    //引入组件

export default new Router({
routes: [{
  path: '/',              //路径
  name: 'Home',           //路由名字
  component: Home         //对应的组件
}]
})

• 使用路由

<router-link to="/">
 ...
</router-link>

---

2. 搜索框布局

• position
  适用范围：不规律布局
  绝对定位使用条件：绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或在这里插入代码片bottom进行绝对定位。

• 参考另一篇博文：《CSS position最容易的理解》
  https://blog.youkuaiyun.com/qq_23111247/article/details/83539466

---

3. 列表布局

• 伪类 :before 和 :after
  在元素前或者后插入内容，例如：

p:after
{ 
content:"我在结尾！";
background-color:yellow;
}

stylus中：

.border-topbottom
    &:before
      border-color: #ccc

---

4. Better-scroll 的使用及字母表布局

• Github下载Better-scroll插件： https://github.com/ustbhuangyi/better-scroll
• npm install better-scroll --save
• 使用
  import BScroll from 'better-scroll'
const scroll = new BScroll(DOM)
• Vue.s中的ref ：https://www.jianshu.com/p/3bd8a2b07d57

---

5. 页面动态数据渲染

---

6. 兄弟组件间联动