我是 Vue 新手,我正在尝试学习如何应用 Vue 路由器。我的正常路由工作没有问题。当我尝试使用动态路由时,一切都继续正常工作。当我尝试将 props 传递给动态路由时,我的代码崩溃了。
我使用的是 Vue 和 Vue router 的 cdn 版本,这是官方网站建议的版本: -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
});
当我导航到“名称”页面时,静态文本呈现正常,但动态文本无法加载。我添加了一个按钮,它将从 props 和 $route.params 记录 name 的值给用户。单击后发现 props 中的 name 值未定义,但 params 中的 name 值是正确的。为什么是这样?
最佳答案
如果您坚持使用 VueRouter@2.0.0 或更低版本:
您期望的名称不会作为 prop 传递,而是作为路由参数 cf. Dynamic route matching 传递。 .
您需要从模板中访问它,如下所示:$route.params.name
。
您也可以使用计算值。
是否可以更新VueRouter
正如另一个答案所述,并根据 release note of VueRouter@2.2.0 ,将路由参数作为 props 传递仅在 v2.2.0 中引入,您使用的是 v2.0.0。如果您想使用 props,您需要更新到(至少)v2.2.0。
关于javascript - 为什么组件 props 未定义(vue 路由器),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50518789/