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>

解决！