Component name “home“ should always be multi-word.eslintvue/multi-word-component-names

Posted myh0904

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Component name “home“ should always be multi-word.eslintvue/multi-word-component-names相关的知识,希望对你有一定的参考价值。

vue刚创建完就报错Component name “home“ should always be multi-word.eslintvue/multi-word-component-names,原因是在组件命名的时候未按照 ESLint 的官方代码规范进行命名。

解决方法:

配置 .eslintrc.js文件
关闭命名规则
找到 .eslintrc.js 文件在 rules 里面加上这么一句

// 关闭名称校验
'vue/multi-word-component-names': "off" 

module.exports =

  rules:

    // 关闭名称校验

    "vue/multi-word-component-names": "off",

  ,

;

关闭之后还是会有错误

新手在组件命名的时候不够规范,根据官方风格指南,除了根组件(App.vue)外,自定义组件名称应该由多单词组成,防止和html标签冲突。
而最新的vue-cli创建的项目使用了最新的vue/cli-plugin-eslint插件,在vue/cli-plugin-eslint v7.20.0版本之后就引用了vue/multi-word-component-names规则,所以在编译的时候判定此次错误。

解决方案:
修改组件名为多个单词,使用大驼峰命名方式或者用“-”连接单词。

router-link动态赋值

 

A:router路由配置

export default new Router({
  routes: [
    {
      path: ‘/home‘,
      name: ‘Home‘,
      component: Home,
      children:[
        {path:‘home1‘,component:Home1},
        {path:‘home2‘,component:Home2},
        {path:‘home3‘,component:Home3},
        {path:‘home4‘,component:Home4},
      ],
    },{
      path: ‘/detail‘,
      name: ‘detail‘,
      component:Detail
    },{
 path:‘/‘,redirect:‘/home/home1‘
    }
  ],
  linkActiveClass:‘ac‘
})

 

B.template内部

<li v-for="data in tuijiaList.playlists">
<router-link :to="{path:‘/detail‘,query:{id:data.id}}" >
<span>{{data.playCount}}</span><i><img :src="data.coverImgUrl"></i>
<p>{{data.name}}</p>
</router-link>
</li>

 

C:在detail页面上怎么得到id 值? 
this.$route.query.id;

在vue中怎么动态变换router-link中to的值

比如有这么个router需要跳转

const router = new VueRouter({
  routes: [
    {
      path: ‘/user/:userId‘,
      name: ‘user‘,
      component: User
    }
  ]
})

 

你的router-link可以这么写

<router-link :to="{ name: ‘user‘, params: { userId: 123 }}">User
</router-link>

还可以用编程在代码里写,效果也一样:

router.push({ name: ‘user‘, params: { userId: 123 }})

 
 
 
click 传值
productDet(inde) {
  this.$router.push({
    path: "/addsEdit",
    name: "addsEdit",
    params: {
      indexs: inde
    }
  });
},
接收
this.indexs= this.$route.params.indexs;
 
 
 

转自博客:https://www.cnblogs.com/xcdl/p/7411235.html



以上是关于Component name “home“ should always be multi-word.eslintvue/multi-word-component-names的主要内容,如果未能解决你的问题,请参考以下文章

Vue提示warn[vue-router] Named Route ‘home’ has a default child route…

Vue提示warn[vue-router] Named Route ‘home’ has a default child route…

Vue-router

vue路由的使用

react---react项目中如何使用iconfont

vue学习记录 coderwhy d8