无法从 Vue 路由器传递组件中的道具

Posted 2023-02-16

【中文标题】无法从 Vue 路由器传递组件中的道具

【英文标题】：Cannot pass props in component from Vue router

【发布时间】：2021-11-27 05:54:27

【问题描述】：

您好，我正在尝试从我的 vue 路由器传递道具，但它没有打印任何内容，并且在登录时已安装它返回未定义，但是当我尝试 console.log(this.$route.params.id); 时，它给出的值当我尝试 this.id 时返回未定义或者更确切地说，在我的用户模板中它没有输出任何东西，我正在观看的在线教程中正在使用相同的代码，请帮助我，在最近的版本中是否发生了任何修改

let User = 
  props: ['id'],
  template: `
            <div>Hello # id</div>
        `,
  mounted() 
    console.log(this.$route.params); // this is returning the value
    console.log(this.id); // this is giving undefined
  


let App = 
  template: `
            <div class="wrapper">
                <router-view></router-view>    
            </div>
        `


let router = new VueRouter(
  routes: [
    path: '/user/:id',
    component: User,
    props: true
  , ],
)

let app = new Vue(
  el: '#app',
  router: router,
  components: 
    'app': App
  
)

router.push('/user/1')

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

<div id="app">
  <app></app>
</div>

【问题讨论】：

您的日志不工作。它也没有安装。

该应用看起来不完整，因此没有足够的上下文来重现问题。你能分享一个复制的链接吗？

@tony19 运行上面的例子，在 vscode 中安装 live server (ritwick dey) 扩展，你可以复制上面的代码并创建 index.html ，在 vs code 中右键单击这个 index.html 文件，并使用实时服务器打开，您将能够重现问题

@DostonbekOripjonov 一旦您在本地服务器上运行上述代码并转到路由路径，例如localhost:8888/user/1

，日志将生成

【参考方案1】：

您使用的是非常旧版本的 Vue 路由器。只需切换到当前版本 - 3.5.2 - 您的代码就会按预期工作....

let User = 
  props: ['id'],
  template: `
            <div>Hello # id</div>
        `,
  mounted() 
    console.log(this.$route.params); // this is returning the value
    console.log(this.id); // this is giving undefined
  


let App = 
  template: `
            <div class="wrapper">
                <router-view></router-view>    
            </div>
        `


let router = new VueRouter(
  routes: [
    path: '/user/:id',
    component: User,
    props: true
  , ],
)

let app = new Vue(
  el: '#app',
  router: router,
  components: 
    'app': App
  
)

router.push('/user/1')

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>

<div id="app">
  <app></app>
</div>