javascript - Why is component props undefined (vue router) - Stack Overflow

I am new to Vue and I'm trying to learn how to apply Vue router. I got normal routing to work no problem. When I try to use dynamic routing everything continued to work fine. When I tried to pass props to dynamic routes however my code breaks.

I'm using these cdn versions of Vue and Vue router which are the versions suggested by the official websites: - /[email protected]/dist/vue.js - /[email protected]/dist/vue-router.js

The HTML

<div id="app">
  <h1>{{ message }}</h1>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/user/John">Name</router-link>
  </nav>
  <!-- route outlet -->
  <!-- ponent matched by route will render here -->
  <router-view></router-view>
</div>

The JS

// Route ponents
  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };
  const User = { props: ['name'], template: `
    <div>
      <div>User {{ name }}</div>
      <button @click="checkName">Check</button>
    </div>`,
    methods: {
      checkName: function() {
        console.log('Params name: ' + this.$route.params.name);
        console.log('Props name: ' + this.name);
      }
    }
  };

  // Routes for router
  const routes = [
    { path: '/', ponent: Home },
    { path: '/home', redirect: Home },
    { path: '/about', ponent: About },
    { path: '/user/:name', ponent: User, props: true }
  ];

  const router = new VueRouter({
    routes: routes
  });

  const app = new Vue({
    el: '#app',
    data: {
      message: 'VueJS Router'
    },
    router: router
  });

When I navigate to the 'Name' page the static text renders fine but the dynamic text fails to load. I added a button that will log the value of name from props and from $route.params to the user. When clicked it turns out that the value of name in props is undefined but the value of name from params is correct. Why is this?

I am new to Vue and I'm trying to learn how to apply Vue router. I got normal routing to work no problem. When I try to use dynamic routing everything continued to work fine. When I tried to pass props to dynamic routes however my code breaks.

I'm using these cdn versions of Vue and Vue router which are the versions suggested by the official websites: - https://cdn.jsdelivr/npm/[email protected]/dist/vue.js - https://unpkg./[email protected]/dist/vue-router.js

The HTML

<div id="app">
  <h1>{{ message }}</h1>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/user/John">Name</router-link>
  </nav>
  <!-- route outlet -->
  <!-- ponent matched by route will render here -->
  <router-view></router-view>
</div>

The JS

// Route ponents
  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };
  const User = { props: ['name'], template: `
    <div>
      <div>User {{ name }}</div>
      <button @click="checkName">Check</button>
    </div>`,
    methods: {
      checkName: function() {
        console.log('Params name: ' + this.$route.params.name);
        console.log('Props name: ' + this.name);
      }
    }
  };

  // Routes for router
  const routes = [
    { path: '/', ponent: Home },
    { path: '/home', redirect: Home },
    { path: '/about', ponent: About },
    { path: '/user/:name', ponent: User, props: true }
  ];

  const router = new VueRouter({
    routes: routes
  });

  const app = new Vue({
    el: '#app',
    data: {
      message: 'VueJS Router'
    },
    router: router
  });

When I navigate to the 'Name' page the static text renders fine but the dynamic text fails to load. I added a button that will log the value of name from props and from $route.params to the user. When clicked it turns out that the value of name in props is undefined but the value of name from params is correct. Why is this?

• javascript
• vue.js
• vuejs2
• vue-ponent
• vue-router

Share Follow asked May 24, 2018 at 22:00 TheNewGuyTheNewGuy 8522 silver badges1212 bronze badges 1

• The name is a url param not a prop – Vivick Commented May 24, 2018 at 22:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If you're sticking with [email protected] or lower :
The name that you expect is not passed as a prop but as a route param, cf. Dynamic route matching.

You need to access it from your template as follow : $route.params.name.

You could also use a puted value instead.

If you can update VueRouter
As stated in another answer, and according to the release note of [email protected], passing down route params as props has only been introduced in v2.2.0, you were using v2.0.0. If you would like to use props you would need to update to (at least) v2.2.0.

CDN link provided on the Vue Router installation page was outdated. Instead of:

https://unpkg./[email protected]/dist/vue-router.js

use:

https://unpkg./[email protected]/dist/vue-router.js

Answer provided here: https://forum.vuejs/t/why-is-ponent-props-undefined-vue-router/34929/5