vue項目筆記（23）-動態路由傳值及iconfont更新使用

動態路由與路由傳值

router-link相關知識

vue中可以使用<router-link></router-link>實現路由跳轉，vue中<router-link></router-link>將來會被渲染成a標籤，且有默認樣式。

<router-link></router-link>帶有tag屬性，可以設置將來渲染成的標籤類型，比如li標籤。

綁定動態路由，實現到不同頁面路由的切換，在router/index.js中配置路由。

home/components/Recommend.vue

<template>
  <div class="recommend">
    <div class="recommend-title">熱銷推薦</div>
    <ul>
      <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/' + item.id"  >
        <img class="item-img"
             :src="item.imgUrl">
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看詳情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }

新建pages/detail/Detail.vue組件即可。

iconfont更新使用

 在項目中，我們已經使用了部分的圖標，新的組件中需要新的圖標，我們可以在iconfont官網查找，並添加到購物車中，然後“下載到本地”使用即可。在新生成的文件中，我們將字體文件替換。需要注意的是，我們必須修改iconfont.css中的部分代碼（用新生成的iconfont.css中對應位置的代碼代替即可）

iconfont.css

 url('data:application/x-font-woff;charset=utf-8;base64,...