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

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

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

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

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

Answer 1

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

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

从word看来，什么都没有改变，它不调用手表

从任何方法手动解析$route 不是最干净的解决方案，更好的方法是结合使用props 和watcher 来获取你的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,
    },

Answer 2

我建议你在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()
}