> 作者：threedayman
>
> 来源：[恒生LIGHT云社区](https://developer.hs.net/thread/1717)

## **1.安装插件没有写入到package.json中**

例如需要安装vue-router插件通过以下命令

```
cnpm install vue-router
```

发现安装插件成功，但是package.json文件中的依赖信息中没有vue-router。查询资料后为了确保插件信息能够写入到package.json文件中，需要通过以下命令，增加--save 选项。

```
cnpm install vue-router --save
```

## **2. 路由信息未生效**

路由配置信息 index.js,里面配置了路由地址和对应的组件信息，通过类似key、value的形式绑定。

```
import Vue from "vue";
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
import About from "../views/About.vue"

Vue.use(VueRouter)

const routers =[
    {
        path:'/',
        name:'Home',
        component:Home
    },
    {
        path:'/about',
        name:'About',
        component: About
    }
]

const router = new VueRouter({
    mode:'history',
    base:process.env.BASE_URL,
    routers
})

export default router
```

路由组件页面Home和About

```
<template>
  <div class="home">
    <h1>This is Home</h1>
  </div>
</template>
```

```
<template>
  <div class="about">
    <h1>This is About</h1>
  </div>
</template>
```

通过App.vue页面演示路由跳转，App.vue相关代码如下

```
<template>
  <div id="app">
    <router-link to="/">转去HOME</router-link>|
    <router-link to="/about">转去About</router-link>
    <router-view />
  </div>
</template>

export default {
  name: 'App',
  data(){
    return{
      radio:"1"
    }
  }
 
}
</script>

```

演示的时候发现path信息随着点击变化，但是组件信息没有展示出来，如下。

![image-20211205213845083.png](https://developer.hs.net/storage/attachments/2021/12/07/Gv6qgVELtVay1hGCRgDtRyMmysiOGfg5KPLoqvKz_thumb.png "4084")

经过确认是由于index中的routes拼写错误为routers，将其改正后运行正常。

![image-20211205214040997.png](https://developer.hs.net/storage/attachments/2021/12/07/AgQStlJvYCZbM5jFsl8l6Cg0lsDGDvfGg7TObbNa_thumb.png "4085")

这种拼写错误开发工具却不提醒，或者对于后端开发来说编译器没有报错，定位问题真的只能靠搜索工具了。

## **组件注册但未使用**

定义了一个CommonAside.vue组件，并在Main.vue中进行使用。

```
<template>
  <el-container style="height: 100%">
    <el-aside width="auto"><common-aside></common-aside></el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

</style>
```

当通过npm run serve 启动项目的时候 出现以下错误信息

```
The "CommonAside" component has been registered but not used  vue/no-unused-components
```

通过搜索相关信息建议 `<common-aside>`首字母改为大写，修改后项目正常启动。

ITPub博客

从0开始学VUE - 踩坑记录

最新文章