在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ $route.matched報錯

$route.matched報錯

js
const foo = {template:'<div>{{$route.matched}}</div>'}
const bar = {template:'<div>{{$route.fullPath}}</div>'}

const router1 = new VueRouter({
routes: [

// 下面的對象就是 route record
{ path: '/foo', component: foo,
  children: [
    // 這也是個 route record
    { path: 'bar', component: bar }
  ]
}

]
})

const app = new Vue({

el:'#app',
router:router1

})

html

<!DOCTYPE html>
<html>
<head>

<title>vue-router</title>
<meta charset="utf-8">
<style>
</style>

</head>
<script type="text/javascript" src='vue.js'></script>
<script type="text/javascript" src='vue-router.js'></script>
<body>
<div id='app'>

<h1>hello app!</h1>
<p>
    <router-link to='/foo/bar'>go to foo</router-link>
</p>
<router-view></router-view>

</div>
<script type="text/javascript" src='vueRouter.js'></script>
</body>
</html>

會報這樣的錯誤
Vue warn: Error in render: "TypeError: Converting circular structure to JSON"

求解

回答
編輯回答
久愛她

這個錯誤的意思大概是json中有循環(huán)引用，但是為什么會出現呢？

首先，$router.matched是一個數組，然后里面包著對象，你可以本地輸出$router看看,如果你要在頁面中輸出這個數組的時候，js會自動幫你轉成字符串，也就是使用JSON.stringify()這個方法，但是當js幫你轉換的時候發(fā)現，你這個$router.matched中包含了循環(huán)引用，也就是這個$router.matched.instance.default.$router等于$router。

舉個不恰當的例子，比如
a = { b: a },當你要JSON.stringify(a)的時候就會輸出"{"b":{"b":{"b":{.......}}}"

而這個錯誤就是為了避免出現這種情況的。

2018年7月17日 09:12