vue-router 采坑记录

一、错误：Uncaught Error: [vue-router] route config "component" for path: /detail cannot be a string id. Use an actual component instead.

 解决方案：路由配置中

import Detail from './components/detail.vue';

const routers = [
  ......
    {
        path:'/detail',
        name:'detail',
        component:'Detail' //这里是组件名称,不能加引号！！！！去掉引号，问题解决。
    },

......
]

二、警告：vue-router.esm.js?8c4f:16 [vue-router] Route with name 'detail' does not exist

解决方案：

const router = new VueRouter({
    mode: 'history',
    routes//即routes:routes的简写形式----注意这里，是routes，必须是routes，这是一个固定的属性。
})

三、错误：vue-router.esm.js?8c4f:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:

解决方案：重写push方法,加上catch处理,防止报错

const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}

四、动态参数问题：连接上带着参数和不带参数的配置

URL上带参：

  {
      path: '/:msg',//params传参,设置动态参数,链接上会有这个参数
     name:'home',
     component: Home
   },

URL上不带参：

 {
        path: '/',params传参,没有设置动态参数,链接上不会有这个参数,刷新页面参数丢失    
         name:'home',
        component: Home
    }

四、[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be 
automatically inherited because component renders fragment or text root nodes. 
  at <Users class="dash-ht" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView class="dash-ht" > at <App>

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be 
automatically inherited because component renders fragment or text root nodes. 
  at <Users class="dash-ht" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView class="dash-ht" > at <App>

这个错误 是在vue文件中的<template></template>标签中有多个根元素造成的,比如

 

<template>
    <div>
        这是第一个根元素
    </div>
    <div>
        这是第二个根元素
    </div>
</template>

 解决办法就是用一个div包裹这两个div

<template>
    <div>
       这个才是根元素,把下面两个包裹起来
        <div>
            这是第一个根元素
        </div>
        <div>
            这是第二个根元素
        </div>
    </div>
</template>