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

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

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

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

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

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()
}

Answer 2

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

用户单击“ http://localhost:8080/word/4”
Vue路由器更新$route
路由器视图更新视图，将MainBody换成Word，更新传递的道具并调用created和mounted

从word的角度来看，什么都没有改变，所以它不会调用手表

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

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

如果使用此选项，请确保在路由器中指定props: true：

    {   path: '/word/:id',
        name: 'word',   
        component: Word,
        props: true,
    },

Vue路由器问题

2 个答案: