Vuejs router.params不確定

Question

我只是想用路由器PARAMS一個基本功能，我得到未定義router.params

我的模板

<div id="app><template id="image-capture"> 
      <div class="row" > 
       <router-link :to="{ path: 'vc/'+item.id}" class="btn btn-primary"> ACCEPT</router-link> 
    </div> 
     </template></div> 

現在我的URL看起來像這樣http://localhost/cams-web/#/vc/3

const ic = { 
    template: '#image-capture' , 
} 

const vc = { 
    template: '#video-capture' , 

    mounted() { 
    this.init() 
    }, 

    methods: { 
    init() { 
    console.log(router); //returns object 
console.log(router.params); //undefined.. 
    }, 
    } 
} 


const routes = [ 
    { path: '/ic', component: ic}, 
    { path: '/vc/:id', component: vc} 
] 

const router = new VueRouter({ 
    routes 
}) 

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

Answer 1

要訪問router params，您需要在代碼中使用this.$route.params。你的代碼應該如下：

const vc = { 
    template: '#video-capture' , 

    mounted() { 
    this.init() 
    }, 

    methods: { 
    init() { 
     console.log(this.$route); //should return object 
     console.log(this.$route.params); //should return object 
     console.log(this.$route.params.id); //should return id of URL param 
    }, 
    } 
} 

這裏是工作fiddle。