この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:6
ページ更新者:T
更新日時:2026-05-15 03:52:15

タイトル: aリンクの貼り方と動的URLの作成
SEOタイトル: 【Vue.js】aリンクの貼り方と動的URLの作成 <router-link>

この記事の要点

 

Vue.jsにおいてaタグのリンクを貼る方法を説明します。

javascript側の詳細はこちらを参照。

 

HTML

<router-link to="/"> Top </router-link>

<router-link to="/channels"> Channels </router-link>

<router-link to="`/channel/${ id }`"> Channel </router-link>

3番目はパラメータを受け取るパターン。(動的URL)

 

Javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

require('./bootstrap');

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: require('./components/Top.vue') },
        { path: '/channels', component: require('./components/Channels.vue') },
        { path: '/channel/:id', component: require('./components/Channel.vue') },
    ]
})

const app = new Vue({
    el: '#app',
    router,
})