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,...