Vue Router路由参数问题排查：Vue 2跳转后页面空白

核心错误：组件导入与引用不匹配 #

在routes.js中，你导入组件时命名为test，但路由配置里却使用了未定义的test_token变量，导致Vue无法找到对应组件，页面因此空白。

修复后的routes.js代码： #

// 修正导入的变量名，与路由中使用的一致
import test_token from '@/components/test_token'
import Home from '@/views/Home'

export default[
    {
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: '/test/:id',
        component: test_token
    }
]

或者另一种修正方式（保持导入变量名不变，修改路由中的组件引用）：

import test from '@/components/test_token'
import Home from '@/views/Home'

export default[
    {
        path: "/",
        name: "Home",
        component: Home
    },
    {
        path: '/test/:id',
        component: test // 这里改为导入的变量名test
    }
]

可选优化：路由参数变化时同步数据 #

如果后续需要在组件内部使用id变量，且希望路由参数变化时自动更新该变量，可以在test_token.vue中添加路由监听：

<template>
    <div>User {{ id }}</div>
</template>

<script>
export default {
    name: 'test_token',
    data() {
        return {
            id: this.$route.params.id
        };
    },
    // 监听路由变化，更新id值
    watch: {
      '$route'(to) {
        this.id = to.params.id
      }
    }
}
</script>

完成以上修复后，访问/test/10即可正常显示「User 10」。

内容的提问来源于stack exchange，提问作者Ali