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

目录

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

转载：https://blog.csdn.net/io_123io_123/article/details/126861873