Vue:踏坑之路

前言

此文章会一直记录我在学习前端的各种坑。

vue 2.0 图片问题

<div class="index-board-list">
  <div
    class="index-board-item"
    v-for="(item, index) in boardList"
    :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]"><!-- 判断使用哪个css样式 -->
    <div class="index-board-item-inner">
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
      <div class="index-board-button">
        <router-link class="button" :to="{path: 'detail/' + item.toKey}">立即购买</router-link>
      </div>
    </div>
  </div>
</div>
.index-board-car .index-board-item-inner{
  background: url(/static/images/1.png) no-repeat; /* 使用这个路径图片正常显示 */
}
.index-board-loud .index-board-item-inner{
  background: url(../../static/images/2.png) no-repeat; /* 使用此路径提示:无法载入图像 */
}
.index-board-earth .index-board-item-inner{
  background: url(../../static/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner{
  background: url(../../static/images/4.png) no-repeat;
}

所以,如果你把图片背景放在了<style>标签中,需要使用/而不是../,一定要看清楚哈,是static目录下!如果你放在了其他目录,我可不保证好使。

/:代表了当前网站根目录所在的位置

./:代表了当前目录

../:代表了上一级目录

如果要在<script>标签内添加图片,需要使用node语法:

require("../../static/images/4.png") /* 中间跟图片路径 */

路由

  1. 设置多个不同的路径模板,只需要一个出口<router-view/>就行,这样所有匹配路径模板都会被渲染到对应位置
  2. 路由必须在父级模板中引用 <router-view/>
  3. 嵌套路由和独立路由发生了冲突,那么优先匹配嵌套路由。
Last modification:February 23rd, 2018 at 12:56 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment