解决:Cannot read property ‘component‘ of undefined ( 即 vue-router 0.x 转化为 2.x)

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

vue项目原本是用0.x版本的vue-router,但是去报出:Cannot read property 'component' of undefined

这是因为版本问题,由于vue2删除了vue1的内部指令,而vue-router1.x依赖vue的一个内部指令

研究了下vue-router官网,小白我用了接近一天来解决问题,最后我将vue-router改为2.2.0版本

1.打开package.json  将"dependencies"中的   "vue-router"版本改为:"^2.2.0"

2.执行:

npm install 

3.在App.vue中

        <a v-link="{path:'/goods'}"></a>

改为 <router-link to="/goods">商品</router-link> 

4.然后在main.js中(我的main.js是这样的【2.2.0版本】)

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import goods from './components/goods/goods';
import seller from './components/seller/seller';
import ratings from './components/ratings/ratings';


//使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
Vue.use(VueRouter);

//定义路由
var routes=[
{path:'/',redirect: '/goods'}, 
{path:'/goods',component:goods},
{path:'/ratings',component:ratings},
{path:'/seller',component:seller}
]

//创建 router 实例,然后传 `routes` 配置
var router=new VueRouter({
linkActiveClass: 'active',
  routes
});
//=> 是ES6的箭头语法
new Vue({
el:'#app',
router,
render:h=>h(App)
})

vue-router官网:https://router.vuejs.org


--------------------- 
转自:https://blog.csdn.net/m0_37754657/article/details/71269988 
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448051.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AMD Mantle再添新作,引发下代GPU架构猜想

摘要&#xff1a;今年秋天即将发布的《希德梅尔文明&#xff1a;太空》将全面支持AMD Mantle API&#xff0c;如此强大的功能背后离不开强大的CPU、GPU支持。上周AMD爆出了下一代海盗岛R9 300系列&#xff0c;据网友猜测海盗岛家族可能用上速度更快的HBM堆栈式内存。 小伙伴们…

不作35岁的程序员?

程序员三部曲--不作35岁的程序员?摩西2000 在中国&#xff0c;程序员不能超过35岁&#xff0c;似乎已经是不争的事实&#xff0c;软件开发工作就是青春饭&#xff0c;顶多靠毕业这十年的时间&#xff0c;超过这个年龄&#xff0c;要不成功跃身成为管理者&#xff0c;要不转…

linux下使用TC模拟弱网络环境

linux下使用TC模拟弱网络环境 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块。该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带宽、传输延迟、丢包等等情 况。使用 Linux 2.6 (或以上) 版本内核…

CDN 是什么 、CDN 引入

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 CDN 的全称是 Content Delivery Network&#xff0c;即内容分发网络。 CDN的基本原理是广泛采用各种缓存服务器&#xff0c;将这些缓存…

长寿的人会有的8个健康理念

长寿的人会有的8个健康理念。年轻的时候总是在挥霍身体健康&#xff0c;吸烟、喝酒没有节制&#xff0c;到老了之后身体会出现各种问题。老年人如果想要身体健康、长寿的话&#xff0c;就要从日常生活习惯做起。下面小编就来介绍长寿的人会有的8个健康理念&#xff1a; 1、少…

Ubuntu下selenium+Chrome的安装使用

Ubuntu下seleniumChrome的安装使用 安装 chrome 官网下载安装包 sudo dpkg -i google-chrome-stable_current_amd64.deb whereis google-chrome 安装selenium pip3 install selenium 下载chromedriver(火狐使用geckodriver)驱动 http://npm.taobao.org/mirrors/chromed…

shoot for用法

Look, there are people like Ross who need to shoot for the stars, with his museum, and his papers getting published.---《老友记》 而像罗斯这种人则追求卓越&#xff0c;博物馆&#xff0c;发表论文。 争取;为...而努力Were shooting this year for a 50% increase in…

VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.需求&#xff1a; 我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。 后端返回的只是一个 list &#xff0c; 前端页…

安全离职妙招

高招的离职&#xff0c;不但有可能让前老板帮你说好话&#xff0c;让前同事成为你的啦啦队&#xff0c;未来若有好机会&#xff0c;还会想到你&#xff0c;只要你学会克服离职流程中的五个尴尬情境。 情境一、离职怎么提&#xff1f; 口头请辞&#xff0c;最先告知上司。 有…

字节内推~

大佬们有兴趣来字节约饭么&#xff0c;下面是内推链接~ 社招内推链接&#xff1a;https://job.toutiao.com/s/LwpKWU8 校招内推链接&#xff1a;https://job.toutiao.com/s/LwsFw6g

使用编辑工具快速创建实体对象的方法

快速创建java类 (\w)\s(.) /** $2 */\nprivate String $1; search Mode 为 Reqular expression 转载于:https://www.cnblogs.com/otways/p/11283303.html

超详细 图解 : IntelliJ IDEA 逆向生成 JAVA 实体类

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.配置数据库,&#xff0c;这里连接的是mysql。 2.填写 连接数据库的信息&#xff0c;填写完成后可以点击Test Connection,测试一下是否…

用面粉和醋洗头 让你的头发黑亮又浓密

用面粉和醋洗头发&#xff0c;别看这些最廉价、最普通的东西&#xff0c;却能带来意想不到的效果。调配这种洗头液很简单&#xff0c;取50&#xff5e;100克面粉&#xff0c;加入少许凉水调成稀面糊&#xff0c;倒入沸水中煮开&#xff0c;然后加入25&#xff5e;50克醋&#x…

leetcode练习——数组篇(1)(std::ios::sync_with_stdio(false);std::cin.tie(nullptr);)

题号1. 两数之和&#xff1a; 给定一个整数数组 nums 和一个目标值 target&#xff0c;请你在该数组中找出和为目标值的那 两个 整数&#xff0c;并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;你不能重复利用这个数组中同样的元素。 示例: …

intellij idea 中去除 @Autowired 注入对象带来的红色下划线报错提示

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 PS&#xff1a; 有 2 种方法&#xff0c;第 2 种方法更简单&#xff0c;在此谢谢好心友人的评论。 方法1&#xff1a; idea中通过Autow…

根据目标选择减肥方法 少做无用功

不同的美体目标适合的减肥方法也是不同的&#xff0c;有些人想减去大部分体重&#xff0c;而有些人只是想让身体曲线更柔美&#xff0c;这就要求有相应的减肥方法&#xff0c;对症下药&#xff0c;才会让减肥少做无用功。 目标&#xff1a;我想穿上小一码的衣服 建议&#x…

Coolite动态加载CheckboxGroup,无法在后台中获取

Coolite在后台动态加载CheckboxGroup&#xff0c;页面显示都正常&#xff0c;但是在后台去获取选中的checkbox时&#xff0c;使用下方法&#xff1a; ///<summary>///获取所选权限 ///</summary>///<returns></returns>privatestringGetPermiss…

基于java的数据结构学习——动态数组C++类模板(含拷贝构造,重载常见运算符)

之前实现了java的动态数组&#xff0c;试着写了个C版的&#xff0c;同样对时间复杂度振荡进行了处理。纯手打&#xff0c;代码如下 &#xff1a; // // Created by PC-Saw on 2018/12/19. //#ifndef DATA_STRUCTURE_MYARRAY_H #define DATA_STRUCTURE_MYARRAY_H#include <i…

科目三考试过程详解

科目三是考驾照的最后一项考试&#xff0c;所以考生在这关都很注意&#xff0c;但是有可能是由于过于紧张都难免会有些失误&#xff0c;如果没过的话&#xff0c;那也就意味着您拿照的时间又延长了另外还要交补考费。因此很多学员都想一次性把这项考试通过&#xff0c;那么我们…

图解 IDEA 中 springboot 项目 MyBatis Generator 逆向生成实体类及 mapper 配置文件

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 一、准备工作&#xff1a; 1. 新建一个 配置文件&#xff1a;generatorConfig.xml 。 <?xml version"1.0" encoding&qu…