Question

我是Vue的新手，我正在尝试学习如何应用Vue路由器。我正常路由工作没问题。当我尝试使用动态路由时，一切都继续正常工作。当我试图将道具传递给动态路线时，我的代码就断了。

我使用这些版本的Vue和Vue路由器，它们是官方网站建议的版本： - https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js - https://unpkg.com/vue-router@2.0.0/dist/vue-router.js

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 -->
  <!-- component matched by route will render here -->
  <router-view></router-view>
</div>

JS

// Route components
  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: '/', component: Home },
    { path: '/home', redirect: Home },
    { path: '/about', component: About },
    { path: '/user/:name', component: User, props: true }
  ];

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

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

当我导航到＆＃39;姓名＆＃39;页面静态文本呈现正常但动态文本无法加载。我添加了一个按钮，它将从props和$ route.params中记录name的值给用户。单击时，事实证明，props中的name值未定义，但params中name的值是正确的。为什么是这样？

Answer 1

如果您坚持使用VueRouter@2.0.0或更低版本：
您期望的name不会作为道具传递，而是作为路线参数cf. Dynamic route matching传递。

您需要从模板中访问它，如下所示：$route.params.name。

您也可以使用计算值。

如果您可以更新VueRouter
正如另一个答案中所述，并且根据release note of VueRouter@2.2.0，传递路径参数作为道具只在v2.2.0中引入，你使用的是v2.0.0。如果你想使用道具，你需要更新到（至少）v2.2.0。

为什么组件道具未定义（vue路由器）

1 个答案: