[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的問題Error in render function


1、[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined

  注意,只要出現Error in render,即渲染時候報錯,此時應該去渲染位置去找錯誤,而不是函數里面。

  今天就碰到這個錯誤,我一直只注意着Cannot read property '0' of undefined,所以一直在函數里面調試找錯,卻一直沒找到,最后才注意到Error in render,想着應該是渲染出錯,果然去掉寫的渲染方法,發現就沒報錯了。

  后來看渲染的v-for,發現有個字段寫的不對,這才找到錯誤。都是馬虎惹的禍啊,記錄一下,勉勵自己。

2、vuejs路由使用的問題Error in render function: "TypeError: Cannot read property 'matched' of undefined"

  從一次執行錯誤開始

<div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/about">關於我們</router-link>

    <router-view></router-view>
</div>

  當然了這個HTML代碼是沒有問題的,大家也可以再vue-router的文檔上看到相應的代碼。重點在下邊的js代碼部分,這部分對於第一次接觸vue-router的人大部分會遇到吧。

// 1. 定義(路由)組件。
 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由
 const routes3 = [ { path: '/home', component: Foo }, { path: '/about', component: Bar } ] // 3. 創建 router 實例,然后傳 `routes` 配置
 const router4 = new VueRouter({ routes3 }) // 4. 創建和掛載根實例。
 const app = new Vue({ router4 }).$mount('#app')

  運行錯誤說明:運行以上實例然而界面顯示為空白,什么都沒有。what!這個不對吧。然而打開開發者模式后再來看看,錯誤提示如下

  錯誤分析:其實這個是按照官方的寫法寫的,一般如果喜歡搞得程序員才會遇到。那么為什么會出現這樣的錯誤呢? 因為在官方第2步和第3步總的常量的命名其實是有規則的。 官方的路由定義和路由實例的名稱分別是:routes和router ,但是我們以為這兩個可以隨便變,所以寫成了自己喜歡的名稱。這樣寫之后其實在實例化路由實例和應用實例時要有變化

const router = new VueRouter({ routes // (縮寫)相當於 routes: routes
})

  這兒為什么可以直接將路由定義數組傳入VueRouter中呢?因為實例中對路由定義的數組的命名是routes。注釋中寫了routes相當於routes:routes

  那么如果我們的路由定義數組名稱不是routes當然是不能使用簡寫的。就要乖乖的寫成 routes:routes3或其他方式,routes3不一定是你自己的路由定義數組名稱,請替換成自己的就行

const app = new Vue({ router }).$mount('#app')

  同理官網上載實例化vue對象時直接傳入路由實例,為什么可以這樣傳呢?同樣是因為路由對象命名為了router。 如果你的VueRouter的實例名稱為router4那么你在實例化時乖乖的寫成router:router4這樣。 好了這只是個簡單的踩坑的過程,比較小兒科,望大神略過。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM