作者：threedayman
来源：恒生LIGHT云社区
1.安装插件没有写入到 package.json 中
例如需要安装 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>
<script>
export default { name: 'App', data(){ return{ radio:"1" } } }</script>
<style>#app { margin-top: 60px; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}</style>
复制代码
演示的时候发现 path 信息随着点击变化，但是组件信息没有展示出来，如下。
4084
经过确认是由于 index 中的 routes 拼写错误为 routers，将其改正后运行正常。
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>
<script>import CommonAside from "../components/CommonAside.vue"export default{ name:"Main", components:{CommonAside}};</script><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>首字母改为大写，修改后项目正常启动。
评论