Vuejs2 Vue路由器问题

我在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>

我得到的网址如下

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

http://localhost:8080/word/4

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

我试图在

word中捕获URL参数。vue

如下所示

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

http://localhost:8080/word/4

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

导出默认值{
观察：{
“$route”：“routeChanged”
},
方法：{
路由更改（）{
console.log（此.route.params.id）；
}
}
}

问题是，当我单击

时，我在
控制台中没有得到任何值，当我第二次单击时，我得到了值

为什么会这样？我想第一次得到价值
 我建议您捕获mounted（）和updated（）中的值

我建议您捕获mounted（）和updated（）中的值

您的问题是由您正在观察变化这一事实引起的。为了更好地理解这个问题，以下是一个时间表：

用户单击“”
Vue路由器更新
$route
路由器视图更新视图，将
MainBody
替换为
Word
，更新传递的道具并调用
创建的
和
装载的

因为从word的角度来看，没有任何变化，所以它不会调用手表

从任何方法手动解析
$route
都不是最干净的解决方案，最好是将道具与观察者结合使用以获取您的id：

<script>
    export default {
        props: {
             id: String,
        },
        created() {
             this.routeChanged();
        },
        watch: {
            'id': 'routeChanged',
        },
        methods: {
            routeChanged () {
                console.log(this.id);
            },
        },
    };
</script>

您的问题是由您正在观察变化这一事实引起的。为了更好地理解这个问题，以下是一个时间表：

用户单击“”
Vue路由器更新
$route
路由器视图更新视图，将
MainBody
替换为
Word
，更新传递的道具并调用
创建的
和
装载的

因为从word的角度来看，没有任何变化，所以它不会调用手表

从任何方法手动解析
$route
都不是最干净的解决方案，最好是将道具与观察者结合使用以获取您的id：

<script>
    export default {
        props: {
             id: String,
        },
        created() {
             this.routeChanged();
        },
        watch: {
            'id': 'routeChanged',
        },
        methods: {
            routeChanged () {
                console.log(this.id);
            },
        },
    };
</script>

谢谢@Badgy。你的解决方案与我正好相反。第一次打印的是
id
，但不是第二次打印的。@abuab好的，很抱歉用错误的解决方案浪费了您的时间，我很高兴其他人有正确的想法：）谢谢@badge。你的解决方案与我正好相反。第一次打印的是
id
，但不是第二次打印的。@abuab好吧，很抱歉用错误的解决方案浪费了您的时间，我很高兴其他人有正确的想法：）谢谢@Ferrtbig。您的解决方案工作正常。谢谢。当我第一次加载
http://localhost:8080/
。为什么要打印？我的回答不清楚，
部分应该添加到
word.vue
，而不是
mainbody.vue
谢谢@Ferrybig。我将
部分添加到
word.vue
。谢谢，谢谢@Fertbig。您的解决方案工作正常。谢谢。当我第一次加载
http://localhost:8080/
。为什么要打印？我的回答不清楚，
部分应该添加到
word.vue
，而不是
mainbody.vue
谢谢@Ferrybig。我将
部分添加到
word.vue
。谢谢