vue-踩坑记录

vue报错 Do not use built-in or reserved HTML elements as component id:header

• 组件不能跟html标签重复

v-for引入本地图片

    data(){
      return {
        myList: [
          {img: require('../assets/1.png') },
          {img: require('../assets/2.png')},
          {img: require('../assets/3.png')},
        ],
      }
    }

        <ul class="left-ul">
          <li v-for="(item,index) in myList">
            <img :src="item.img" />
          </li>
        </ul>

vue-cli安装失败 Failed to doenload repo vuejs-templates/webpack-sample: Response code 404

node -v
vue -V
webpack -v

三个都试过了都有版本号，然后发现名字打错了，是simple不是sample （你有病）

router-view 内容出不来

发现是配置路由的时候的问题！

  routes: [
    {
      path: '/', //原本写了path:'./'  多了一个.  不行！！！窒息！！！！
      name: 'Home',
      component: Home
    },
  ]

router-link 小问题

在header.vue中使用router-view报错
要在main.js中new的header的vue实例中加上router

//main.js
new Vue({
  el: '#header',
  router, //这个
  render: h => h(Header)
})

router-link 无法跳转到正确路径

错误代码

        <li v-for="(item,index) in navList">
          <router-link to="item.path">{{item.msg}}</router-link>
        </li>

这样会跳转到http://localhost:8080/#/item.path 中
正确写法应为

        <li v-for="(item,index) in navList">
          <router-link :to="item.path">{{item.msg}}</router-link>   //把to改为 :to
        </li>

改地址栏的参数能跳到对应的结果

用了query传参

$route.query

类型: Object

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user = 1，如果没有查询参数，则是个空对象

踩的坑： 写成了router.query
看了这篇文章发现的，好东西