vue路由報(bào)錯(cuò)：TypeError: Cannot read property 'matched' of undefined

使用vue路由
js文件如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Daohangafter from './vue/daohangafter.vue'
new Vue({
    el:'#five',
    template:'<div><h1>數(shù)據(jù)獲取</h1><hr/><Daohangafter></Daohangafter></div>',
    components:{
        Daohangafter
    }
})

vue文件如下

<template>
<div>
<h2>導(dǎo)航完成后過去數(shù)據(jù)</h2>
<div>
<router-link to="/shuju/one">/shuju/one</router-link>
<router-link to="/shuju/two">/shuju/two</router-link>
<router-link to="/shuju/three">/shuju/three</router-link>
</div>
<div v-if="loading">Loading...</div>
<router-view>
</router-view>
</div>
</template>
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Pagepages={
    template:'<div>fkafnbkfapdp</div>'
}
const router=new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
       {
       path:'/shuju/:id',
        name:'shuju',
        component:Pagepages
   }
    ]
})

export default{
    name:'daohangafter',
    data(){
    return{
      loading:false,
      post:null
    }
    }
}
</script>

在瀏覽器查看效果發(fā)現(xiàn)報(bào)錯(cuò)

請(qǐng)問是為什么報(bào)錯(cuò)，哪里出現(xiàn)問題呢？如何改正呢？