Vuejs router.params未定义

Question

我只是在尝试使用路由器参数的基本功能，而我还没有为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。