vuejs2 - Vue路由器问题

Question

我在 vue 组件文件中有一个如下所示的链接。

<li v-for="(word,index) in allWord" v-bind:key="index">
    <router-link :to="{ name: 'word', params: {id: word.id } }">
       {{word}}
    </router-link> 
</li>

我在文件中的路线设置index.js如下

export default new Router({
    mode: 'history',
    routes: [
        {   
            path: '/',          
            component: MainBody 
        },
        {   path: '/word/:id',
            name: 'word',   
            component: Word 
        }
    ]
});

我得到如下网址

http://localhost:8080/word/4

我正在尝试捕获 URL 参数，word.vue如下所示

<script>
    export default {
        watch: {
            '$route': 'routeChanged'
        },
        methods: {
            routeChanged () {
                console.log(this.$route.params.id);
            }
        }
    }
</script>

问题是当我点击<li></li>我没有获得任何价值时console，我在第二次点击时获得了价值。

为什么会这样？我想第一次获得价值。

标签： vuejs2vue-router

Answer 1

我建议你抓住mounted() 和updated() 中的值。

methods: {
  getid: function()
  {
     this.wordid = this.$route.params.id
  } 
},

watch: {
  wordid: function(val) {
    console.log(this.wordid) // or console.log(val)
  }
},
mounted()
{
   this.getid()
},
updated()
{
 this.getid()
}