【“在路上”疫情信息检测】——项目页面搭建

目录

1、路由跳转——<router-link>

2、组件传参（父传子）

3、循环渲染后台数据

4、Vant ui的使用（这里只介绍一种ui库的使用，其他库的使用也类似）

---

1、路由跳转——<router-link>

        <router-link>介绍：<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

<router-link> 相当于<a href="...">，但是比起写死的 <a href="..."> 会好一些，理由如下：

• 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
• 在 HTML5 history 模式下，router-link 会拦截点击事件，让浏览器不在重新加载页面。
• 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

        <router-link>使用：

要注意两点——前提：需要配置好路由地址；

                         跳转：用“to="路由path"”跳转。

配置路由：/src/router/index.js

{
   path: '/hesuan',
   name: 'HeSuan',
   component: () => import('../views/HeSuan'),
 },

使用<router-link>：/src/view/Home/HomeView.vue

<router-link to="/hesuan">
    <img src="../../assets/images/icon2.png" alt="" />
    <div>核酸检测</div>
</router-link>

2、组件传参（父传子）

（1）父组件引入子组件

<!-- Html -->
<ConData />

// JavaScript
import ConData from "./ConInfo/ConData.vue";
export default {
  components: {  ConData },
}

（2）父组件给子组件传值

<!-- Html -->
<ConData :covData="covData" />

// JavaScript
export default {
 data() {
  return {
   covData: {}, //全国数据统计
 };
}

（3）子组件接收

// JavaScript
export default {
  props: ["covData"],
}

     总结：父组件引入子组件 -> 在父组件中给子组件添加属性 -> 子组件用props接收 

3、循环渲染后台数据

前端渲染后台数据的步骤：

（1）先写页面结构：一定要先搭建好页面结构，这里包括Html、Css这些，这样能够避免我们渲染的时候页面结构出现问题，就不用渲染完成后再调整了。

（2）观察请求到的数据：这里建议将请求到的数据在控制台打印一下（当然，除非你有接口文档），观察一下数据结构，确定循环体是谁。

（3）在循环体上加v-for：这里可能涉及到key的一个问题，可以参考之前的文章，有对key的具体介绍。

4、Vant ui的使用（这里只介绍一种ui库的使用，其他库的使用也类似）

（1）安装：

             yarn add vant@latest-v2 -S（vue2引入）

             yarn add vant -S（vue3引入）

（2）自动按需引入组件（推荐）：yarn add babel-plugin-import -D

（3）// 对于使用 babel7 的用户，可以在 babel.config.js 中配置 

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

（4）安装完成前面的步骤后，重启项目

 （5）创建一个vant.js插件使用：在src下创建一个plugins/vant.js

import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);

 （6）在main.js中引入vant.js