私はVueが初めてで、Vueルーターを適用する方法を学ぼうとしています。問題なく動作するように通常のルーティングを取得しました。動的ルーティングを使用しようとすると、すべてが正常に機能し続けました。しかし、動的ルートに小道具を渡そうとしたとき、コードが壊れます。
公式Webサイトで推奨されているバージョンのVueおよびVueルーターのこれらの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からの名前の値をユーザーに記録するボタンを追加しました。クリックすると、propsのnameの値は未定義ですが、paramsのnameの値は正しいことがわかります。どうしてこれなの?
回答 2 件
Vueルーターのインストールページで提供されるCDNリンクは古くなっていました。の代わりに:
https://unpkg.com/vue-router@2.0.0/dist/vue-router.js
使用する:
https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
ここで提供される回答: https://forum.vuejs.org/t/why-is-component-props-undefined-vue-router/34929/5
関連記事
関連した質問
- Vuejsを使用したボタンクリックでデフォルトの防止オプションを使用できません
- 新しいキーがオブジェクトに追加されたときにv-forを再レンダリングする方法
- vueとmomentを使用してジャスミンのボタンメソッドに引数を渡すことができません
- vueでグローバルにvee-validateを設定するにはどうすればよいですか?
- Vue:アクションが実行されていないときにボタンを非表示にする
- Vue:ローカルストレージからユーザー情報にアクセスする方法
- Vue:コンポーネントにCSSファイルとJSファイルをロードするにはどうすればよいですか?
- VueおよびVuetifyの動的コンテンツ内でレンダリングされない画像ソース
- vuetifyでvuejsビルドサイズを減らす方法は?
- npmパッケージをnuxtjsに追加できません[vue-star-rating]
VueRouter@2.0.0以前を使用している場合:
ザ・
name
あなたが期待することは、小道具としてではなく、ルートパラメーターとして渡されます、cf。動的ルートマッチング。次のようにテンプレートからアクセスする必要があります:
$route.params.name
。代わりに計算値を使用することもできます。
VueRouterを更新できる場合
別の回答で述べたように、VueRouter @ 2.2.0のリリースノートによると、ルートパラメーターを小道具として渡すことはv2.2.0でのみ導入されており、v2.0.0を使用していました。小道具を使用する場合は、(少なくとも)v2.2.0に更新する必要があります。