Vue.JS ABC3 ルーティング

vue-router

パスを定義する。

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/hoge',
    name: 'Hoge',
    component: Hoge
  }
]

const router = new VueRouter({
  routes
})

export default router

使用を宣言

Vue.config.productionTip = false

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

画面遷移させたいところに

<router-view></router-view>

を入れておく。

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

をクリックすることでその画面のところにrouter-viewが表示される。

コードで遷移させる場合は

      this.$router.push('/');