Vue中问题总结 与未解决问题总结
问题一: Error in render: "TypeError: Cannot read property 'matched' of undefined"
使用路由之后报错,路由书写错误,下面是我写的错误的路由:

这是修改之后正确的:

router 才是Vue实例化的配置字段名称,写个其他的它当然不认识了。真是低级错误。
问题二: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

没有注册组件
Vue.use(Router)
未解决问题:vue-router path问题
直接在入口文件main.js里面定义 router
import Router from 'vue-router'
import IndexPage from './pages/IndexPage' //跳转的组件
import Detail from './pages/detail'
//使用router第二步:router注册
Vue.use(Router)
Vue.use(VueResource);
let router=new Router({
mode:'history',
routes:[
{
path:'/',
component:IndexPage
},
{
path: '/detail',
component: Detail
},
]
})
这样在浏览器中直接输入 http://localhost:8080/detail 可以访问Detail ,,但是在router文件夹里面定义一个js文件,router.js 在main.js引入就不可以,,为啥???啥??
import Router from 'vue-router'
import IndexPage from '../pages/IndexPage'
import Detail from '../pages/detail' export default new Router({ //router的map
routes: [
{
path: '/',
component: IndexPage
},
{
path: '/detail',
component: Detail
}
]
})
http://localhost:8080/detail 访问不大,,直接跳转到http://localhost:8080/detail#/ 回到首页,待解决!!!
问题三:关于router-link出现警告的问题 Warnings while compiling.
使用router vue-link书写如下:
<router-link v-for="(item,index) in products" :to="{path:item.path}" tag="li" active-class="active" >
{{item.name}}
</router-link>
浏览器抛出警告:

然后去官网文档查阅了,说是少了个key属性,然后我修改成了这样
<router-link v-for="(item,index) in products" :to="{path:item.path}" tag="li" active-class="active" :key = "index">
{{item.name}}
</router-link>
解决!
Vue中问题总结 与未解决问题总结的更多相关文章
- vue中修改数组,dom未更新的问题
vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...
- 解决vue中BMap未定义问题
原文链接: 点我 最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map引用BMap存在的问题:\color{red}{存在的问题:}存在的问题::使用BMap可以 ...
- vue 中使用 echarts 自适应问题
echarts 自带的自适应方法 resize() 具体用法: let xxEcharts = this.$echarts.init(document.getElementById('xxx')) ...
- 动手实现一个vue中的模态对话框组件
写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- 如何在vue中使用ts
注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
随机推荐
- 三大Flex布局用法(转载)
Flex布局基础 对于Flex 初学者,在Hello World之后,Flex布局便是下一站学习要的要义.若是从传统的Html转变而来,总希望找到类似于Div/Table/UL等之类的控件,也希望在 ...
- 素数(Prime)
素数的判断: #include<math.h> bool IsPrime(int n) { ) return false; int sqr = (int)sqrt(1.0*n); ; i& ...
- Python爬虫4------图片爬虫
import urllib.request import re keyname="短裙" key=urllib.request.quote(keyname) headers=(&q ...
- Tarjan算法 (强联通分量 割点 割边)
变量解释: low 指当前节点在同一强连通分量(或环)能回溯到的dfn最小的节点 dfn 指当前节点是第几个被搜到的节点(时间戳) sta 栈 vis 是否在栈中 ans 指强连通分量的数量 top ...
- indy10中idtcpclient的使用问题[和大华电子称数据交换]
在实际事务应用中,多次打开server进行大写.其中遇到一些问题,由于时间关系,没有好好整理,虽然问题解决了, 但原因和其他方法没有去进一步测试. 1.每个单元用本地TidTCPClient变量连接s ...
- centos solr 集群搭建
一.什么是 SolrCloud SolrCloud(solr 云)是 Solr 提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时 ...
- centos安装wget 及配置
yum -y install wget #yum -y install setup 本文 #yum install perl Searching for GCC... The path "& ...
- 绘图-CAD-改快捷键
CAD的快捷键应该在左手边,左手不离开键盘,右手不离开鼠标,这样的操作才有效率. arc 圆弧命令原命令是ARC Q 圆(CIRCLE) C 原快捷键C被定义为COPY,Q的形状类似圆,只是多了一个尾 ...
- 多校第二场 1004 hdu 5303 Delicious Apples(背包+贪心)
题目链接: 点击打开链接 题目大意: 在一个周长为L的环上.给出n棵苹果树.苹果树的位置是xi,苹果树是ai,苹果商店在0位置,人的篮子最大容量为k,问最少做多远的距离可以把苹果都运到店里 题目分析: ...
- Swift开发教程--怎样自己定义TabBarItem的图片显示
在做项目的时候,假设使用系统的UITabBarController的时候,底部的tab自己定义图片显示是蓝色和灰色的.这不是我们所想要的效果. 假设想显示自己定义的按下和弹起的图片效果.这个时候就须要 ...