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,
})