> 作者：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></router-view>
  </div>
</template>

<div>

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

```

演示的時候發現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>

<div>
import CommonAside from "../components/CommonAside.vue"
export default{
  name:"Main",
  components:{CommonAside}
};
</div>
<style lang="css" scoped="">
.el-header{
  background: #333;
}
.el-main{
  padding-top: 0;
}

</style>
```

當透過npm run serve 啟動專案的時候 出現以下錯誤資訊

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

透過搜尋相關資訊建議 `<common-aside>`首字母改為大寫，修改後專案正常啟動。</common-aside>

從0開始學VUE - 踩坑記錄

相關文章