美文网首页
vue-router从入门到放弃

vue-router从入门到放弃

作者: bo_bo_bo_la | 来源:发表于2018-02-06 22:15 被阅读83次

用命令号创建一个 mytest 文件夹

vue init webpack mytest

初始化 init myproject之后 手动安装vue-router

image.png

再创建三个.vue文件,注意引用文件图片的时候加上./

引入node_modules文件夹模块 不需要加 ./
引入文件要加

<template>
  <div>
    <img class="myImg" src="./timg.jpeg" alt="" />
    <p>这是一只猫</p>
  </div>
</template>

<script>
  export default {
    name: "cat"
  }
</script>

<style scoped>
  .myImg{
    width: 300px;
  }
</style>

<template>
  <div id="app">
    <!--router-view 相当于将main中component的内容加载到这个地方-->
    <router-view ></router-view>
    <router-link to="/dog">小狗</router-link>
    <router-link to="/cat">小猫</router-link>
    <router-link to="/alpaca">羊驼</router-link>

    <!--<router-link :to="/dog">小狗</router-link>-->
    <!--<router-link :to="/cat">小猫</router-link>-->
    <!--<router-link :to="/alpaca">羊驼</router-link>-->
  </div>
</template>
image.png image.png image.png image.png

相关文章

网友评论

      本文标题:vue-router从入门到放弃

      本文链接:https://www.haomeiwen.com/subject/ooilzxtx.html