Vue.jsで記事詳細のデータを取得
Vue.jsで記事詳細のデータを取得 : Vue.jsで記事詳細ページのURLを記事IDに設定して、その記事のdataを展開していくときの書き方です。 routerを設定 「 vue-router 」をinstall $ yarn add vue-router vue-routerをインスタンスにして #app に読み込む。 main.js import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import routes from './routes'; Vue.use(VueRouter); const router = new VueRouter(routes); new Vue({ el: '#app', components: { App }, template: '<App/>', router, }); routes.js import Articles from './page/Articles'; import Detail from './page/Detail'; export default { mode: 'history', routes: [ { path: '/articles', component: Articles, name: 'articles', }, { path: '/articles/:id', component: Detail, name: 'detail', }, ], }; 記事詳細ページにその記事のデータを取得 記事一覧で記事をClickして詳細ページに遷移したときに、その記事のデータをURLの「:id」を元に取得します。 まずは記事一覧で記事詳細の遷移先を...
