问题一: 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中问题总结 与未解决问题总结的更多相关文章

  1. vue中修改数组,dom未更新的问题

    vue中我们会频繁操作各种数据,但有时候发现修改完数据以后,dom并未更新? 比如有一个数组对象: obj = [{'name': 'joy'},{'name': 'bowen'}] 我要循坏插入某个 ...

  2. 解决vue中BMap未定义问题

    原文链接: 点我 最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map引用BMap存在的问题:\color{red}{存在的问题:}存在的问题::使用BMap可以 ...

  3. vue 中使用 echarts 自适应问题

    echarts 自带的自适应方法  resize() 具体用法: let xxEcharts = this.$echarts.init(document.getElementById('xxx')) ...

  4. 动手实现一个vue中的模态对话框组件

    写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是设计 出的图该怎么办呢 ,所以我们需要自己写一个对话框,并且如果有很多地方都用到,那我们 ...

  5. Vue 中动态添加class(使用v-bind:class)

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  6. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  7. 如何在vue中使用ts

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? ...

  8. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  9. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

随机推荐

  1. PythonOpencv-分类器—SVM,KNearest,RTrees,Boost,MLP

    原文链接:http://blog.csdn.net/gjy095/article/details/9243153 上一篇文章,不是很详细,这一篇解释的清晰些,请访问原始链接. Rtrees介绍!参考链 ...

  2. VC++抛出自定义编译期异常的指令

    #error 即可, 抛出消息是 #pragma message 最新的还有static_assert有一些用 一下子忘了网上居然搜不到...尝试了 关键字vc++.vc.vs.msvc +  抛出编 ...

  3. 配置notepad++编程环境

    1. 到 https://sourceforge.net/projects/mingw-w64/files/ 下载MinGW64,解压并移动到C盘根目录 2. 将 C:\MinGW64\bin 加入系 ...

  4. 函数编程中functor和monad的形象解释

    函数编程中functor和monad的形象解释 函数编程中Functor函子与Monad是比较难理解的概念,本文使用了形象的图片方式解释了这两个概念,容易理解与学习,分别使用Haskell和Swift ...

  5. 常用css和js内容

    1.让一个200x200的div在不同分辨率屏幕上下左右居中. <div class="box"></div> <style type="t ...

  6. 实验一:JAVA实验环境搭建

    一. JDK的安装 1.输入 官网地址:http://www.oracle.com/technetwork/java/index.html 如图: 点击之后,就会进入这个界面,进入之后,往下拉点就会看 ...

  7. call和apply的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Project Euler 46 Goldbach's other conjecture( 线性筛法 )

    题意: 克里斯蒂安·哥德巴赫曾经猜想,每个奇合数可以写成一个素数和一个平方的两倍之和 9 = 7 + 2×1215 = 7 + 2×2221 = 3 + 2×3225 = 7 + 2×3227 = 1 ...

  9. [luogu2585 ZJOI2006] 三色二叉树 (树形dp)

    传送门 Description Input 输入文件名:TRO.IN 输入文件仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件名:TRO.OUT 输出文件也只有一行,包 ...

  10. solrj 操作 solr 单机版

    一.导入 jar 包 <dependency> <groupId>org.apache.solr</groupId> <artifactId>solr- ...