vue-router从入门到放弃

用命令号创建一个 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