今天笔者在研究vue-router的时候踩到了一个小坑,这个坑是这样的

笔者的具体代码如下:
router.js

import Home from '@/components/Home.vue';
import Component1 from '@/components/component1.vue'; const routes = [
{ path: '/component1', name:'component1', component: Component1 },
]
export default routes

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router'; import Routes from '@/router/router.js' Vue.config.productionTip = true;
const router = new VueRouter({
routes: Routes,
mode: "history"
}) new Vue({
render: h => h(App),
router: router
}).$mount('#app');

component1.vue

<template>
<div class="component1">
<h1>{{message}}1</h1>
</div>
</template> <script>
export default {
name: 'componnent1',
data () {
return {
message: "hello vue-router"
};
}
}
</script> <style scoped>
</style>

百度报错原因,发现没有在main.js上面原来是没有手动调用Vue.use(VueRouter)。以前习惯了在文件头部直接引入vue.js和vue-router.js,这种方式下,在vue-router内部会检测window.Vue对象是否存在,如果存在就会自动调用Vue.use()方法,否则需要手动调用Vue.use(VueRouter)来确保路由插件注册到Vue中。在支持AMD环境中,Vue对象并不会暴露到全局window对象中,而是会通过define()形式输出和引入,因此需要手动注册。(具体原因拷贝自博客:https://blog.csdn.net/zhangxuekang/article/details/79738820 。尊重原创,侵删。)

在mian.js上面加入Vue.use(VueRouter)就不会报错了…

转: https://blog.csdn.net/luciferms/article/details/83792402

vue-router踩坑日记Unknown custom element router-view的更多相关文章

  1. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  2. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. Larav ...

  3. 【Android】【踩坑日记】RecyclerView获取子View的正确姿势

    开发过程中发现RecyclerView.getChildAt(position)为空的情况,但是明明这个position却没有越界. 解决办法:用recycler.getLayoutManager() ...

  4. 使用vue.js路由踩到的一个坑Unknown custom element

    在配合require.js使用vue路由的时候,遇到了路由组件报错: “vue.js:597 [Vue warn]: Unknown custom element: <router-link&g ...

  5. vue报错[Vue warn]: Unknown custom element: <router-Link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...

  6. (错误记录)Vue: Unknown custom element

    错误: vue.js:634 [Vue warn]: Unknown custom element: <ve-pie> - did you register the component c ...

  7. vue components registration & vue error & Unknown custom element

    vue components registration & vue error & Unknown custom element vue.esm.js:629 [Vue warn]: ...

  8. [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Evaluate> at src/views/index/

    关于vue报错: [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly ...

  9. Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

    一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...

随机推荐

  1. 92.vue---新手从本地项目开发到服务器线上运行爬坑。

    因为我做的是后台,所以不用做SEO 参考 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发.因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余.如果你的项目不关注这方面的问题,也 ...

  2. Qt使用QPainter绘制矢量图并保存为svg文件

    位图和矢量图: Bitmap: Usually a larger file size Cannot be enlarged into a higher resolution as the image ...

  3. springboot 解决 数字长度过长导致JS精度丢失问题

    问题 在开发过程中,我们的主键字段使用了数字作为主键ID,发现数字精度丢失的问题. 上图红框是后端日志的输出. 在浏览器端F12 看到的结果如上图,数据居然自动变化,这个是数字在浏览器丢失了精度,导致 ...

  4. zabbix--4.0源码安装

    Zabbix4.0 源码编译安装 ps:其实相对 zabbix 来说,直接按照官网 yum 安装还是要方便点,我这里已经有 lnmp 的环境了,就想自己编译安装试下. 官网yum安装中文文档:http ...

  5. 洛谷P1084 疫情控制(贪心+倍增)

    这个题以前写过一遍,现在再来写,感觉以前感觉特别不好写的细节现在好些多了,还是有进步吧. 这个题的核心思想就是贪心+二分.因为要求最小时间,直接来求问题将会变得十分麻烦,但是如果转换为二分答案来判断可 ...

  6. C语言const和volatile关键字

    这部分内容比较简单,我这里直接先做总结,然后通过写三个测试代码,体会其中的关键点 一.总结      1.const使得变量具有只读属性(但是不一定就是不能更改) 2.const不能定义真正意义上的常 ...

  7. 项目Alpha冲刺随笔集合

    班级:软件工程1916|W 作业:项目Alpha冲刺 团队名称:SkyReach 目标:完成项目Alpha版本 项目Github地址 评审表 团队博客汇总 队员学号 队员姓名 个人博客地址 备注 22 ...

  8. jsbridge与通信模型

    三层通信模型: 应用层.解释层.会话层: 通信协议: 通信原语: 报文格式: 网络层: _evaluateJavascript 会话层: #define kQueueHasMessage   @&qu ...

  9. 一些开源的dashboard 解决方案

    简单收集了以下开源dashboard 的项目,记录下 plotly-dash 基于python 的dash 开发工具,很不错 项目地址 https://github.com/plotly/dash k ...

  10. Centrifugo  语言无关的实时消息服务

    Centrifugo 语言无关的实时消息服务,基于golang编写,提供了websocket 以及sockjs 的兼容处理,使用上很简单 同时也支持基于redis的扩展,以下是一个简单的运行测试 环境 ...